Components
The 50 components in @elirobinson/react, grouped by atomic tier. Every page carries live demos, a generated props table, the exact import subpath, and the keyboard contract you inherit. Which tier a component lands in is decided by the tier boundary, four questions asked in order.
Below them is a second set, counted separately because it is a second package: AI Elements, vendored from Vercel. One pnpm add gets you the tiers above; the AI tier is its own install, with its own requirement.
ai (3)
Surfaces that only mean anything inside an assistant interaction — a turn-taking message log, a streaming affordance. This is the one tier decided by domain, and the tier boundary asks about it first.
atoms (16)
Single-purpose primitives — not further divisible.
AvatarImage avatar with initials fallback, in sm/md/lg sizes.BadgeSmall status label — default, signal, anchor, solid, and outline variants.ButtonThe primary action control — primary, accent, secondary, and ghost variants in three sizes.CheckboxLabelled checkbox with a full-height 44px click row.EyebrowUppercase mono section label — marketing typography.InputBatteries-included labelled text input with hint and error wiring.KbdStyled kbd element for keyboard-shortcut hints.LabelStandalone form label for controls that manage their own wiring.ProgressDeterminate progress bar with an accessible value readout.RadioGroupContext-based radio group; the group owns name, checked state, and change handling.SeparatorHorizontal or vertical hairline divider.SkeletonLoading placeholder block that respects reduced motion.SliderLabelled native range input.SpinnerStatus-role loading indicator in three sizes.SwitchSwitch-role toggle with a labelled click target.TextareaLabelled multiline text field with hint and error wiring. molecules (15)
A few atoms combined into one functional unit, with no portal or overlay orchestration.
AlertStatus callout for success, warning, danger, and info messages.BreadcrumbPage-hierarchy trail with a current-page marker.CardBordered content surface with header, title, description, content, and footer subcomponents.ChipCompact tag with an optional dense remove button.DecisionCardA verdict, the figures behind it, and an action that exists only when the verdict allows one.EmptyStatePlaceholder for empty data — title, description, icon, and action slot.FormFieldLabel, hint, and error wrapper for controls that don't wire their own accessibility.PaginationPage-button list with aria-current marking and 44px targets.RatingStar rating — read-only by default, interactive when given a change handler.RuleLinkInk-underline arrow link for marketing pages.SearchFieldSearch input with a built-in dense clear button.SegmentedControlRadio-style option group with arrow-key navigation and 44px targets.StepperOrdered-list progress indicator for multi-step flows.StubCardA summary that reads as a ticket stub: a body column beside a perforated stub column.VerdictBadgeA decision marker that states its verdict as a glyph and a word, never by colour alone. organisms (16)
Compound components with internal state or overlay orchestration — portals, focus management, keyboard navigation.
AccordionExpandable sections with configurable heading levels.ComboboxFilterable single-select combobox with a virtualized listbox popup.CommandPaletteDialog-based command list with search filtering and keyboard-shortcut hints.DatePickerPopover date grid using the ARIA grid pattern.DialogModal dialog built on the native dialog element.DropdownMenuKeyboard-navigable action menu anchored to a trigger.NavigationMenuAlways-rendered nested link list with current-page marking.PopoverAnchored floating panel with outside-click and Escape dismissal.SelectNative select with label, hint, and error wiring.SheetEdge drawer built on the native dialog element.TablePaginated data table backed by `@tanstack/react-table`'s row models.
For large row counts, use `VirtualTable` instead — windowing and pagination
are two strategies for the same problem, so neither component combines them.TabsTab set with roving focus and an ink underline active state.ToastAria-live notification system — Toaster region plus a useToast dispatcher.TooltipHover- and focus-triggered tooltip anchored to its trigger.VirtualListWindowed list that only renders the rows currently within (or near) its
viewport, backed by `@tanstack/react-virtual`. Intended to be composed by
`Table` (opt-in `virtualize` prop) and `Combobox` (long option lists) —
see the props above for what those consumers need: `height` (container
height), `estimateSize` (row height estimate), `overscan`, and
`renderItem` (render an arbitrary item by index).
The forwarded ref resolves to a {@link VirtualListHandle}, not the scroll
container element.VirtualTableData table that windows its rows instead of paginating them, for large row
counts. Same column model, sorting, and filtering as `Table`; use that one
when pagination is the better fit. AI Elements (74 vendored modules)
The assistant tier — vendored from vercel/ai-elements at a pinned release and skinned with this system's tokens. It ships as @elirobinson/ai-elements, a separate install from @elirobinson/react, and it is the one part of the system whose source is not ours.
These need a Tailwind 4 build. Nothing in the tiers above does — that difference is why they are separate packages, and without a Tailwind 4 pipeline a vendored component renders as unstyled HTML with no error to explain it. See Installing AI Elements.
Interaction hooks (7)
The keyboard behaviors the organisms share, exported for when you build your own composite widgets — see interaction hooks.