Primitives
57 theme-aware building blocks. Every specimen renders the shipped component — switch the theme and the whole page follows.
- RaisedThe raised slab: flat fill, top-lit gradient, inset shine, edge and halo rings. For surfaces a backdrop blur cannot work on — a transparent Tauri window has nothing behind it to smear. Override --surface-fill for a non-card fill.
- AccordionVertically stacked collapsibles with single or multiple open items.
- AlertInline status message with title and description slots.
- AvatarImage with initials fallback. One shape everywhere an agent or person appears.
- BackgroundThe pixelated desert wallpaper. `white` and `black` are the theme pair — the default scene follows the theme; the other three are opt-in by name.
- BadgeSmall status or category chip. Variants carry the meaning.
- BreadcrumbHierarchical trail for deep pages. Collapses with an ellipsis.
- ButtonVariants, tones, and sizes. The resting border is a 1px inset ring, not a border.
- ButtonGroupJoined row of buttons and labels that share one border.
- CardThe one card style. Showcase pages compose it, never restyle it.
- Card densitydensity="compact" is the flush card: no block padding, no gap, clipped corners, and a 0.75rem/1rem content inset.
- CarouselEmbla-backed slides with previous/next controls.
- ChartRecharts with theme tokens. Config maps series to chart-N hues.
- CheckboxBinary control with the theme's control border. Always pair with a Label.
- ClickableCardA Card that renders as a link (href) or a button (onClick), with hover/active surface steps.
- CollapsibleSingle show/hide region. Accordion is stacks of these.
- ColorPickerBatteries-included color popover. The drop-in replacement for <input type=color>.
- ColorSwatchA color block with positioned overlay slots for labels and badges.
- ComboboxBase-UI autocomplete with input group, popup list, and mobile sheet presentation.
- Commandcmdk command menu: input, list, groups, and empty state.
- ContextMenuRight-click menu for canvas and row surfaces.
- DialogCentered modal with header, footer, and focus restoration.
- DrawerBottom sheet for touch; anchored popover content on desktop via the shared sheet layer.
- DropdownMenuAction menu for buttons and row overflow. Labels group, separators divide.
- EmptyZero-state composition: media, title, description, and an action slot.
- Empty framedframed swaps the dashed default for a solid hairline, for a zero state that sits inside a panel.
- ErrorStateFriendly one-liner plus retry plus technical disclosure. Never leaks JSON/SQL/schema. Promoted from the console.
- FieldLabel + control + description/error stack. The shape every form row uses.
- Formreact-hook-form bindings: FormField wires label, control, description, and message to one id.
- HighlightedTextCase-insensitive multi-match <mark> highlighter for log lines and preformatted text. Promoted from the console (alias LogLineHighlight).
- HoverCardRich hover preview for records, agents, and links.
- InputSingle-line field on the shared resting border. Sizes match buttons.
- InputGroupInput with addons: leading icons, trailing buttons, and prefix/suffix text.
- InputOTPOne-time-code slots with caret, separator support, and paste handling.
- ItemList-row composition: media, title/description content, and trailing actions.
- KbdKeyboard glyphs, alone or grouped. The dialog submit button wears these.
- LabelForm label bound to a control by htmlFor. Never a bare <span>.
- NavigationMenuTop-level site nav with dropdown panels. Backs the marketing headers.
- PaginationPage links with previous/next and ellipsis for long runs.
- PerspectiveBook3D book that opens on click, with header/title/description slots for the cover.
- PopoverAnchored floating panel for pickers, filters, and small forms.
- ProgressDeterminate bar for uploads, builds, and multi-step flows.
- RadioGroupSingle-choice control with the theme's control border.
- ResizableDrag-to-resize panel groups with keyboard-accessible handles.
- ScrollAreaThemed scrollbars for dense panels and dropdowns.
- SelectSingle-choice dropdown. The trigger wears the shared trigger face.
- SeparatorHairline rule, horizontal or vertical, with spacing built in.
- SheetEdge-anchored panel for detail views and inspectors.
- SliderSingle or range slider on the theme track.
- SonnerSonner-powered toaster. Fire with toast() from the sonner package.
- SpinnerRow-level spinner for buttons and inline pending states.
- SwitchBinary toggle with the theme's control border.
- TableUncontrolled data table: header, body, footer, caption. Reach for DataTable for sorting/filtering.
- TabsTabbed regions. The default strip is a button group: the glass halo backs the run, the active tab wears the outline button whole, and the rest are muted labels on the halo.
- TextareaMulti-line field. Plain Enter stays a newline; DialogForm adds Cmd+Enter submit.
- TogglePressed-state button for bold/italic-style formatting controls.
- ToggleGroupSingle or multiple pressed toggles sharing one border.
- TokenClickable design-token chips with value tooltips. The Foundations page is built on these.
- TooltipHover hint for icon buttons and truncated labels.
- ValueFlashNumber that pops green/red when its value moves. Honors reduced motion.