Components

All components

50 documented. Click through for live previews, guidelines and the registry install command.

primitives

AvatarUser / entity avatar. Loads an image with graceful fallback to initials or an icon. Always provide both — never just an `<img>`.
BadgeSmall inline label — count, status, tag. For severity-coloured pills use `<Chip>`; the Badge variants are tone-only and don't carry severity meaning.
ButtonTrigger for the primary action on a screen. For navigation use a `<Link>` or the `link` variant; never wrap a route push in a button.
CardSurface for grouping related content. Use for product detail tiles, settings sections, list items that need to feel like discrete objects.
CheckboxBoolean toggle. Use for independent yes/no choices and table-row selection. For mutually exclusive options use Radio; for an on/off setting that triggers an action use a Switch (when added).
ChipSeverity / status pill. The only place colour means severity in the system — never use Chip for non-severity tags. For neutral metadata use `<Badge>` or a plain neutral Chip (no `severity` prop).
CommandFilterable list — the building block for search palettes, command bars, and combobox menus. Built on `cmdk`.
DialogModal that interrupts the user. Use for confirmations, focused sub-tasks, or destructive flows. For long-form editing prefer a Sheet so the page stays visible behind it.
DropdownMenuPopover with a list of actions, anchored to a trigger. Use for kebab menus, account menus, table-row actions. For *selecting a value* use a Select / Combobox.
DSTableProduct-grade list table with sticky header, sortable columns, optional pagination and row-selection state. The default choice for any /list page.
EmptyEmpty / zero-data state. Tells the user what's missing AND what they can do about it. Never just a sad face — always a clear next action.
FieldForm-field family — the canonical wrapper for any input + label + description + error in non-auth forms. Use this instead of composing labels and errors by hand so spacing and a11y stay consistent.
InputSingle-line text field. Use for short, scalar values (name, slug, email). For multi-line content use Textarea; for choice between options use a Select / Combobox.
LabelForm-control label. Always pair with the input it describes via `htmlFor` — even when visually hidden.
PopoverAnchor-positioned floating container for arbitrary content — mini forms, info cards, color pickers, anything that's not strictly a menu (DropdownMenu) or a hover-only label (Tooltip).
RadioGroupSingle-select group of mutually exclusive options. For boolean on/off use `<Switch>` or `<Checkbox>`; for many-of-many use a list of `<Checkbox>`.
SelectPick one value from a known finite set. For free-text autocomplete or large fuzzy-searchable lists, reach for `<Command>` (Combobox pattern). For 2-5 visible options use `<RadioGroup>`.
SeparatorHairline divider between sections. Horizontal by default; supports vertical orientation for inline groupings.
SheetSide panel sliding in from an edge. Use for detail views, edit forms, and any flow where the user benefits from keeping the underlying page in context.
SkeletonPulsing placeholder while async content loads. Match the rough shape of the eventual content, not a generic grey block.
SwitchToggle that fires its action immediately on flip. Use for settings that take effect right away (theme, notifications). For form-bound booleans that submit on Save use `<Checkbox>`.
TableHTML table primitives styled to match the system. For product list-pages with sort, pagination and selection use `<DSTable>` instead — this primitive is the lower-level building block.
TablePaginationFooter strip for tables: "Showing X of Y · rows-per-page · page X of Y · navigation". Used internally by `<DSTable>` — most pages don't need to render this directly.
TabsSwitch between equivalent views of the same object (Overview / Settings / Activity). For navigation between *different* objects use the sidebar; for filtering a list use a SegmentedControl or filter chips.
TextareaMulti-line text input. Auto-grows with content via `field-sizing: content`. Use for descriptions, notes, anything that may exceed a single line.
ToasterTop-level notification host (built on `sonner`). Mount `<Toaster />` once in the root layout, then call `toast()` / `toast.success()` / `toast.error()` from anywhere — purely imperative, no per-callsite provider gymnastics.
TooltipOn-hover label for icons and constrained controls. For long-form context use a Popover; never use a Tooltip to hide critical information.

patterns

layouts

brand

BrandMarkThe chevron-checkmark logomark, optionally with a per-product wordmark next to it. Use exactly one in the topbar of every product — never recreate the symbol elsewhere.