@ilomee/aura-react

The React 19 library for Aura. One set of tokens, four libraries, the same markup from the same stylesheet.

Thin, tree-shakeable components over the shared @ilomee/aura-core tokens and CSS, with zero runtime dependencies.

Install

npm i @ilomee/aura-react @ilomee/aura-core react react-dom

@ilomee/aura-core, react, and react-dom are peer dependencies.

Setup

Load the stylesheets once in your app entry (the components render class names only — the visual layer lives in the token package):

import '@ilomee/aura-core/css';            // CSS variables (required)
import '@ilomee/aura-core/components.css'; // component + layout + typography classes (required)
import '@ilomee/aura-core/animations.css'; // optional animation layer

Wrap your app in the provider to drive theme / accent / corner / density:

import { AuraProvider, Button, Typography, Stack } from '@ilomee/aura-react';

export function App() {
  return (
    <AuraProvider defaultTheme="light" defaultAccent="aqua">
      <Stack gap={4}>
        <Typography variant="h1">Aura</Typography>
        <Button variant="primary">Get started</Button>
      </Stack>
    </AuraProvider>
  );
}

API

Generated from the docs registry — do not edit by hand. Run npm run docs:gen.

Full API, live previews and cross-framework parity: https://ilomee.github.io/aura

Theming

| Component | Used as | Props | | --- | --- | --- | | AuraProvider | AuraProvider | theme, defaultTheme, onThemeChange, accent, defaultAccent, onAccentChange, corner, defaultCorner, onCornerChange, density, defaultDensity, onDensityChange, vars, as |

Primitives

| Component | Used as | Props | | --- | --- | --- | | Typography | Typography | variant, as, tone, align, truncate, lines | | Button | Button | variant, size, tone, loading, type | | Card | Card | elevation | | Badge | Badge | tone, size | | IconButton | IconButton | size, tone, aria-label*, children* (slot) | | Chip | Chip | size, removable, onRemove, removeLabel | | Switch | Switch | label, checked, defaultChecked, onCheckedChange, disabled | | Field | Field | label, hint, error, value, defaultValue, onValueChange, inputClassName | | Scroll | Scroll | as, maxHeight, height | | Checkbox | Checkbox | label, checked, defaultChecked, indeterminate, onCheckedChange, disabled | | RadioGroup | RadioGroup | label, name, options, value, defaultValue, onValueChange, disabled | | Radio | Radio | label, name, value, checked, disabled | | Textarea | Textarea | label, hint, error, value, defaultValue, onValueChange, id, autoGrow, inputClassName | | Select | Select | options, value (binding), defaultValue, onValueChange (emit), placeholder, hint, error, emptyLabel, open (binding), onOpenChange (emit), renderOption | | MultiSelect | MultiSelect | options, value (binding), defaultValue, onValueChange (emit), hint, error, searchable, max, removeLabel, renderOption | | Fieldset | Fieldset | legend, disabled | | Accordion | Accordion | items, exclusive, name, renderPanel | | SegmentedControl | SegmentedControl | label, options, value, defaultValue, onValueChange, name, disabled | | Alert | Alert | tone, title, urgent, withCloseButton, closeLabel, onClose, icon | | Avatar | Avatar | src, alt, initials, size | | AvatarGroup | AvatarGroup | — | | Skeleton | Skeleton | variant, width, height, animated | | Loader | Loader | size, label | | Progress | Progress | value, label | | List | List | ordered, plain | | Indicator | Indicator | count, hidden, label, children (slot) | | RingProgress | RingProgress | value, label, children (slot) | | Toast | ToastViewport | renderToast, action, toasts, onDismiss* (emit), closeLabel | | Tabs | Tabs | renderPanel, items, value (binding), defaultValue, onValueChange (emit), orientation, manual | | Dialog | Dialog | width, open, onClose* (emit), title, label, top, withCloseButton, closeLabel, autoFocus | | Popover | Popover | content*, children*, label, openOn, open (binding), defaultOpen, onOpenChange (emit), side, align | | Menu | Menu | items, children, label, open (binding), defaultOpen, onOpenChange (emit), onSelect (emit), point, side, align, emptyLabel, width, renderItem | | Tooltip | Tooltip | label*, children*, side, align, delay, names | | HabitHeatmap | HabitHeatmap | values, weeks, max, cellLabel | | DataTable | DataTable | columns*, rows, rowKey, actions, emptyLabel, caption | | StepWizard | StepWizard | renderStep, steps*, active, children (slot) | | TimeGrid | TimeGrid | events, dayStart, dayEnd, dayLabels, showNow |

Not in this package: Code, Blockquote, Mark, Anchor — A class, not a component: there is no state, no props and no behaviour for a wrapper to add — <code class="aura-code"> is the whole API. Write the markup, or reach for Typography when the text is a block rather than a fragment.

Layout

| Component | Used as | Props | | --- | --- | --- | | Stack | Stack | as, direction, gap, align, justify, wrap | | Flex | Flex | as, direction, gap, align, justify, wrap | | Group | Group | as, gap, align | | Grid | Grid | as, cols, gap, minItemWidth | | Container | Container | as, maxWidth, padInline | | Masonry | Masonry | as, cols, gap | | Divider | Divider | orientation, label |

Not in this package: Spacer — A class, not a component: no state, no props, no behaviour for a wrapper to add — <div class="aura-spacer"> is the whole API. Write the markup, or put margin-inline-start: auto on the element you want pushed and skip the node entirely.

Recipes

Not in this package: StatBadge, CalloutList, ProgressCard, FormDialog, CommandPalette — An example, not a component. This was a composition of primitives with a name, and the name was the only thing it added — so the composition is on this page in full, and there is nothing to install or import.

* required

Notes

• RSC: the package is a client boundary ("use client"). Import components from a Server Component freely — they render as client components, the standard pattern.
• Responsive layout: Grid/Masonry accept cols={{ base, md, lg }}; Grid also supports intrinsic minItemWidth="240px". No runtime media JS — resolution is pure CSS.
• Customisation: every component merges (never replaces) its base class and forwards native attributes; override any token via CSS variables or the provider's vars prop.