Components
shadcn/ui primitives, restyled with the DESIGN.md tokens and served from @stocklots/ui-components. Each page shows every variant and state a component ships with, in both modes. Everything at a glance: /showcase. The values underneath: /tokens.
shadcn primitives
Registry components, restyled against DESIGN.md and re-exported from @stocklots/ui-components.
- AccordionStacked disclosure on hairlines; single or multiple open, 200ms reveal.
- AlertInline notice on a soft tint with a status edge and one recovery action.
- Alert dialogA decision that must be answered: destructive, proceed-anyway, small.
- Aspect ratioHolds a box to a ratio so media never shifts layout while it loads.
- AttachmentFile chip: 40px media tile, name, size, ghost remove action; groups.
- AvatarHumans and agents by shape; image, then initials on a name-hashed hue; pulsing presence ring; groups cap at three.
- BadgeNeutral and status chips, plus the seven task lifecycle states.
- Breadcrumb13px muted trail, current page in ink, 14px chevrons, ellipsis for depth.
- BubbleCompact chat bubble with reactions; 8px corners, actor colours.
- ButtonEight variants, four sizes, icon sizes, disabled and loading states.
- Button groupSegments, split buttons and toolbars joined edge to edge; separator underneath.
- CalendarSingle, range, dropdowns, presets, time, booked, week numbers, manual entry.
- CardSurface on a hairline, header / content / footer, density-aware padding.
- ChartRecharts on the six categorical tokens; popover tooltip, muted axes. Plus the whole recharts.org example gallery, ported onto the tokens.
- CheckboxChecked, indeterminate, disabled, invalid; the box the table selects with.
- CollapsibleOne region shown or hidden by its own trigger; the mechanism under 'show more'.
- Commandcmdk list and the ⌘K palette: Dropdown-density rows, groups, shortcuts as Kbd.
- Context menuRight-click menu on rows and canvases; same rows and tokens as Dropdown menu.
- Data tableTanStack Table v9 helpers: filter, sortable heads, column toggle, row selection, pager.
- DialogCentred panel over a scrim: form, long content, footer close, controlled async.
- DirectionRadix reading-direction provider; flips menus and popovers for RTL.
- DrawerVaul sheet that drags closed; bottom on mobile, black/60 scrim, 4px corners on the exposed edge.
- Dropdown menuFloating surface for row actions and column toggles; checkbox, radio and submenus.
- Empty stateHeading, one sentence, one action.
- Field status iconFixed-width auto-save slot: dirty dot, saving spinner, saved check, error with Retry.
- Hover cardPopover surface on hover for actor and record previews; 500ms in, 200ms out.
- InputThree sizes aligned to buttons, label, helper, error, read-only, disabled, textarea.
- Input groupIcons, units, shortcut hints and buttons inside one field edge; textarea footer.
- Input OTPOne slot per character for verification codes; paste fills all.
- ItemOne list row: media, title + description, actions; outline or muted, sm size.
- KbdKey caps for shortcuts in menus and the command palette.
- MarkerEvent marker across a thread: status icon tile on a hairline; 24 / 32px tiles.
- MenubarDesktop-style menu strip; contents share every token with Dropdown menu.
- MessageThread row: avatar, 8px content block, header, footer with provenance.
- Message scrollerSticks a thread to its bottom; outline icon button to return when scrolled up.
- Native selectThe OS picker in Input clothing; for mobile forms and very long lists.
- Navigation menuTop-bar sections with a popover viewport for grouped links; ghost triggers.
- PaginationGhost 32px page links, outline for the current page, sm prev/next.
- PopoverAnchored floating surface for a form fragment or detail; no scrim.
- ProgressDeterminate bar and the indeterminate sweep for agent runs.
- QuestionnaireStepped question flow on a 12px panel: progress, choice cards, one primary action.
- Radio group16px circles, primary fill with a light dot when chosen; choice cards via Field.
- Relative timeHydration-safe <time>: absolute before mount, relative after, absolute again past a cutoff.
- ResizableDraggable hairline between panels; optional grip on surface-2.
- Scroll areaCustom 10px scrollbar on border-strong for panels and long lists.
- SelectInput-sized trigger, grouped list, placeholder, disabled and invalid.
- SeparatorThe 1px hairline, horizontal or vertical; the only separation language.
- SheetEdge-attached panel for inspectors and quick edits; four sides.
- SidebarThe app shell's 240px nav collapsing to a 56px rail; active = primary text + 2px edge.
- SkeletonPlaceholder that waits 300ms before it shows, then pulses calmly.
- Slider4px surface-3 track, primary range, 16px raised thumb; single, range, vertical.
- Switch20×36 pill, primary when on, surface-3 when off; sm 16×28.
- TableCaption, header, body, footer total, numeric cells, row actions, RTL.
- TabsSegmented list on surface-2 or a line variant with the 2px primary edge.
- ToastBottom-right, five seconds, undo as a link. Sonner underneath.
- TogglePressable that stays pressed; surface-3 when on, button heights, flat.
- Toggle groupToggles joined edge to edge; single or multiple selection.
- TooltipInk cap on a 300ms delay for icon-button names and why-disabled hints.
Composite patterns
Assembled from the primitives above; the way this product does forms, tables, loading and errors.
- ComboboxPopover + Command behind an outline trigger; searchable single select.
- Confirm action dialogAlert dialog around a pending mutation: blocks dismissal while pending, destructive focuses Cancel.
- Date pickerCalendar in a Popover behind an outline trigger; single and range.
- DropzoneDrop target on react-dropzone: dashed edge, accept / reject drag states, files as Attachment chips.
- ErrorInline field errors, a form summary, an error modal and the error toast.
- Form dialogDialog around one form: Enter submits, footer closes, a dirty form asks before discarding.
- LoadingSpinner inline, after a field, in a blocking modal, and a modal with ticked steps.
- LogosLockup, mark and wordmark: per-side stroke and colour, per-part fills, scale by height.
- OTP ValidationThe full verification flow: shake on error, success ring, and resend timer.
- Task queueData table as the queue: compact, sticky header, bulk select with a confirming action bar, phone list.
- TypographyThe scale on plain HTML: prose rhythm, blockquote, lists, table, inline code.
To add one: run pnpm dlx shadcn@latest add <name> -c apps/design-system, restyle the generated file against DESIGN.md, then add a page here.