Components
All 44 components, grouped by atomic tier. Every page carries live demos, a generated props table, the exact import subpath, and the keyboard contract you inherit. The tier boundary is a rule, not a vibe.
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 (12)
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.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. 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. Interaction hooks (6)
The keyboard behaviors the organisms share, exported for when you build your own composite widgets — see interaction hooks.