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
- BreadcrumbsTopbar / page-header breadcrumbs. `BreadcrumbDropdown` is a chevron-button that anchors a search-as-you-type menu; `BreadcrumbTrail` auto-inserts separators between children; `BreadcrumbSep` is the bare "/" glyph.
- CopyIdButtonClick-to-copy identifier cell for tables. Truncates long IDs with `…`, swaps to «Copied» for ~1.2s on success, falls back silently when clipboard isn't available.
- DetailPanelRight-side detail / inspector panel for any entity. Built on Sheet — opens over the page, lets the user keep their list context. Inline-editable title by default; pass `titleReadOnly` to render a static heading.
- EditableTitleClick-to-edit page heading. Drop into `<DSPageShell title={…}>` on pages where the user can rename the entity (campaigns, audiences, projects). Otherwise leave the static string title — this is opt-in per page.
- FeedbackButtonTopbar feedback affordance — a button that opens a textarea dialog. v1 is free text + current path; the prop contract leaves room for AI-driven mood / category fields without changing the visible surface.
- ForgotPasswordPageReady-made password-reset request screen. Two states inside one component — email form, then "check your inbox" confirmation. Wire onSubmit to your provider's `forgetPassword` and the host doesn't need to manage success-state UI.
- LanguageMenuItemsLanguage submenu for `<UserMenu>`. Caller supplies the list of supported locales (BCP-47 + native label), the current value, and a setter.
- MagicLinkSentPageConfirmation page after the host triggers a magic-link send. Mostly static — shows the address the link was sent to, the expiration window, and an optional resend button.
- MultiSelectFilterGeneric multi-select filter for table page headers. "All <noun>" / single value / "N selected" trigger label, checkbox items with optional counters, footer Clear entry.
- NotebookTabsNotebook-style top tabs for product pages — rectangles separated by hairlines, the active tab drops its bottom border so it merges with the content. Composes with `<TabsContent>` from the Tabs primitive.
- PanelSectionHeadingCanonical section heading inside a `<DetailPanel>`. Sized one step above body so the hierarchy reads correctly: 24px panel title → 16px section heading → 14px body.
- PanelTableThin wrapper around `<Table>` for use inside a `<DetailPanel>`. Adds a closed perimeter (border on all four sides + rounded corners) and tighter padding tuned for 672px panel width.
- ResetPasswordPageLanding page for the password-reset email link. Reads `?token=…` from the URL, takes new password + confirm, calls onSubmit({ token, password }). Built-in min-length and "passwords don't match" validation.
- SearchPaletteGlobal ⌘K search palette + topbar trigger pill. Path-aware results (breadcrumb-style above each row), AI escape-hatch, keyboard hints in the footer. Mount once in AppShell `topbarCenter`.
- SignUpPageReady-made sign-up screen — name + email + password, optional OAuth row, terms link, sign-in escape-hatch. Drop-in for any product. Auth-provider-agnostic — wire onSignUp / onOAuth to Better Auth, Clerk, Supabase, anything.
- SparklineDependency-free SVG sparkline for timeseries previews in detail panels and table cells. Optional `splitAt` adds a vertical dashed marker for recent-vs-baseline windows.
- ThemeMenuItemsTheme submenu (light / dark / system) for use inside `<UserMenu>`. State is owned by the caller — pair with next-themes / your own theme store.
- UserMenuTop-bar account dropdown — circular avatar trigger, profile/settings entries, optional theme/language sub-menus, destructive sign-out at the bottom. Drop into the AppShell `topbarRight` slot.
- VerifyEmailPageLanding page for the email-verification link. Calls `verify(token)` on mount and renders one of four states — verifying, success, expired (with optional resend), or generic error. The host returns `{ error: "expired" }` to switch to the expired state.
layouts
- AppShellUniversal in-app layout — TopBar with brand + breadcrumbs, collapsible Sidebar with three modes (expanded / collapsed / hover), scrollable content area. The chrome around every product page.
- DSPageShellDistilled list-page layout: title row at the top, scroll-owned body in the middle, mono-caps stats footer at the bottom. The recurring template behind every /list page in CIP / Archi / Supertest.
- PageContainerCenters page content at the canonical max-width set in `@8maverik8/tokens`. Use this on every content page so the column lines up across products.