UI Components

@aetherAssembly/ui is a small React 19 component library. Components are built on semantic HTML elements, styled entirely with CSS custom properties (--ae-*), and use BEM-style class names scoped to the ae- prefix.

Using the stylesheet

The package ships src/styles.css with default --ae-* token values. Import it once at your app root:

import '@aetherAssembly/ui/src/styles.css'

If you don't import the stylesheet, tokens will be unset and components will be unstyled. You can also skip it entirely and define all tokens yourself.

CSS token reference

All visual styling in every component references these tokens. Override any of them in :root to theme the entire library.

Colors

Spacing

Typography

Radius & shadows

Theming

Override tokens in your app's :root block. You only need to set the tokens you want to change — everything else falls back to the defaults from styles.css. Dark mode works the same way, inside a .dark-mode or @media (prefers-color-scheme: dark) block.

Example — mapping Attyre's warm palette:

:root {
  --ae-color-primary:        var(--gold);
  --ae-color-primary-hover:  var(--gold-dark);
  --ae-color-primary-fg:     #ffffff;
  --ae-color-secondary:      var(--stone-mid);
  --ae-color-secondary-fg:   var(--ink);
  --ae-color-danger:         var(--error);
  --ae-color-bg:             var(--bg-surface);
  --ae-color-surface:        var(--bg-subtle);
  --ae-color-text:           var(--text-primary);
  --ae-color-text-muted:     var(--text-muted);
  --ae-color-border:         var(--border);
  --ae-color-border-focus:   var(--gold);
  --ae-font-sans:            var(--font);
  --ae-radius-md:            var(--radius-md);
}

Component reference

Button

import { Button } from '@aetherAssembly/ui'

<Button variant="primary" size="md" onClick={save}>Save</Button>
<Button variant="danger" loading={isDeleting}>Delete</Button>
<Button variant="ghost" size="sm" disabled>Unavailable</Button>

CSS classes: ae-btn, ae-btn--{variant}, ae-btn--{size}, ae-btn__spinner

Card

<Card header={<h2>Title</h2>} footer={<Button size="sm">Action</Button>}>
  <p>Card body content.</p>
</Card>

CSS classes: ae-card, ae-card__header, ae-card__body, ae-card__footer

Badge

<Badge variant="success">Fresh</Badge>
<Badge variant="warning">Expiring soon</Badge>
<Badge variant="danger">Expired</Badge>

CSS classes: ae-badge, ae-badge--{variant}

Input

<Input
  label="City"
  hint="e.g. Tokyo Japan"
  error={errors.city}
  value={city}
  onChange={e => setCity(e.target.value)}
/>

The id is auto-generated from the label ("My Field" → "my-field"). Pass an explicit id prop to override.

CSS classes: ae-input-group, ae-input-group__label, ae-input-group__input, ae-input-group__error, ae-input-group__hint

Modal

<Modal
  open={isOpen}
  onClose={() => setOpen(false)}
  title="Confirm deletion"
>
  <p>This cannot be undone.</p>
  <Button variant="danger" onClick={handleDelete}>Delete</Button>
</Modal>

Wraps the native <dialog> element. showModal() gives you browser-native focus trapping, Escape to close, and the ::backdrop pseudo-element for the overlay — no JS needed for any of that. Clicking directly on the <dialog> (the backdrop area) calls onClose.

CSS classes: ae-modal, ae-modal__content, ae-modal__header, ae-modal__title, ae-modal__close, ae-modal__body