5 variants × 4 states. ButtonLink ships the same look on an <a>.

3 sizes (sm / md default / lg) × states. Always renders inside a flex-col wrapper with optional label + helper/error.

Custom box matching primary. States: default / checked / disabled / error.

Group via shared `name`. Pick exactly one.

32×16 pill switch. Use for binary on/off (auto-reprice, dry-run, sandbox).

Native <select> wrapped to match Input. Single 24px size.

Generic label + helper/error wrapper. Use it around anything that isn't already an Input/Select (e.g. a Checkbox group, a custom date control).

Form / FormSection / FormRow / FormGrid / FormActions / FilterBar. Impose consistent rhythm + alignment without changing how individual fields render. Inside <Form>, every field reserves a fixed-height helper line so layout doesn't jump on validation toggle.

4 variants — default / muted / compact / compactMuted. Just a div with border + shadow.

6 tones × 2 sizes (sm default, xs compact) × with/without dot. Use for inline status labels and table cells.

Hover any chip below to reveal popup. Harvested from repricer table tags.

Controlled, uncontrolled, or anchor-based for SSR. Use to break long pages without losing the visual identity. Mix-and-match `href` per item — items with `href` render as <a>, items without keep <button>.

Image OR initials (auto from name, color hashed). 4 sizes — xs / sm / md / lg. Pass `colorSeed` to keep the color stable when the display name changes (e.g. seed by email or user-id).

Fixed-size slot for a brand mark — square (favicons / app tiles / identity) or wide (3.5:1 navbar / hero wordmarks). Sizes match the surfaces they're named for (xs/sm/md/lg). Robust placeholders cover every empty state: initial letter, generic image-off icon, deterministic color seed, skeleton while loading, automatic fallback when the image URL fails.

The canonical 'logged-in user pill + dropdown' combo. Encapsulates avatar + identity text + chevron triggering a menu (account / settings / sign out). Two variants: `full` (bordered pill, default) for TopNav `end` slot or Sidebar footer; `compact` (icon-only avatar) for collapsed sidebars and dense surfaces.

Indeterminate "still working" indicator. Single size (12px). For determinate % use Progress.

Determinate (0–100%) and indeterminate variants. Use determinate when you have a measurable %, indeterminate when you don't (slides infinitely).

3 shapes — line / block / circle. Shimmer animation respects prefers-reduced-motion.

Replaces literal 'No items yet' copy across surfaces.

Lightweight hover/focus tooltip for icon buttons + table cells. For tag-shaped triggers use TagWithInfo.

Last item is rendered as the current page (no link).

Compact page-number variant with prev/next steppers, ellipsis, and an optional inline page-size selector.

<Table> + <TableHead/Body/Row/Cell/HeaderCell> — same look every consumer was already hand-rolling.

Animates a number from 0 (or `from`) to `value` over `duration` ms with easeOutCubic. Re-animates when value changes.

Bigger sibling of AppTile — full feature/integration card with icon-box, title, description, optional badge. 7 tones (same as AppTile).

Bigger empty/error/loading/success layouts for full-page contexts. Use as the entire main when there's nothing else to render.

Line-by-line text diff. Tone-tinted bg for added (positive) and removed (critical) lines. Unified or split layout.

Full-width inline banner. Different from Toast — sits in the document flow, persists, and can carry actions. 5 tones with default icons; supports a dismiss button.

Click a value to edit it inline. Enter or check button to commit, Esc or × to cancel.

Input that turns Enter / comma into a tag chip. Backspace on empty input removes the last tag. Paste comma-separated text to bulk-add.

Two resizable panes separated by a draggable divider. Hover the divider to see the resize cursor.

Pill-style single-select toggle group. Use for view-mode switchers (Day / Week / Month), filter scopes — anywhere there are 2–5 mutually-exclusive options.

Radio group rendered as colored swatches. Use for tag-color pickers, account-color pickers, anywhere the user picks one of a curated palette. Real <input type=radio> under the hood — keyboard nav and form submission work natively.

Star rating. Click to set, hover to preview, supports half-stars via step={0.5}. Read-only mode for displaying averages.

Hierarchical list with expandable folder nodes. Use for category navigation, file explorers, taxonomy.

GitHub-style activity grid. 7 rows (days of week, Sun→Sat) × N columns (weeks). Cell intensity bucketed by max value in the data.

Numeric field with −/+ steppers + format/parse hooks for currency, percent, etc. Default width is 'auto' (sizes to content with a sensible minimum); pass width='full' to align edges with sibling fields inside FormGrid.

Wrap an Input/NumberInput with text or button addons on either side. Useful for $ prefix, .com suffix, http:// prefix, /h suffix, etc.

Definition-list-style label:value pairs for 'Order details', 'Account info', etc. Two layouts.

Drag-and-drop dropzone + click-to-select. Lists picked files with per-file remove buttons.

Read-only photo grid → full-bleed dark lightbox. Click any thumb to open. Keyboard ← → Esc · scroll-wheel zoom · click-drag pan when zoomed · mobile swipe + double-tap zoom. Mono inline order badge replaces the 'primary' chip — slot #1 IS the primary.

Upload (click + drag-drop + paste-from-clipboard), reorder via drag, set primary by promoting to slot #1 OR via primaryId prop, delete, optional crop/rotate/replace, per-tile progress + error. Two layouts: `grid` (default) for editing surfaces, `hero` for catalog primary-photo flows (large preview + thumb strip + arrows). Videos are first-class via `kind:'video'` — they always sort to the end and can never be primary.

Cmd+K-style modal with fuzzy search across a flat command list. Esc + click-outside dismiss; ↑/↓/Enter to navigate.

Numeric range input. Single value or range, optional drag tooltip, labeled marks, tone-colored fill, painted track segments.

Single-character cells for OTPs / verification codes. Auto-advances on type, Backspace moves back, paste distributes across cells.

Single-action copy with success flash. Use inline next to API tokens, share URLs, ASINs, etc.

Pre/code container with mono font + recess shadow + inline copy button. Optional language label, title, line numbers, max height.

react-markdown + remark-gfm with every element styled to DS tokens. Headings, links, code, blockquotes, lists, tables, task list checkboxes use --vs-* colors and the package size scale. Safe-by-default (no raw HTML).

Click-triggered floating panel. Heavier than Tooltip — supports interactive content like forms and action buttons. Click outside or Esc to dismiss.

Typographic visual for keyboard shortcuts.

Multi-step progress indicator. Use for wizards, onboarding, multi-step forms. Horizontal default; pass orientation='vertical' for sidebar wizards.

Event list with dots + connector. Vertical (default) for audit logs / activity feeds. Horizontal for status flows / deploy history / order tracking.

SVG-only, no external deps. All inherit tokens + tones from the design system. Hover charts to see values.

KPI / metric tile. Label · big number · optional delta with trend arrow · hint line · optional Sparkline. Bottom carries a 2px gradient accent in the tone so a row reads as one data strip. Tints value, icon, and bg in the tone. Pass `href` or `onClick` to make it clickable (hover halo + focus ring).

Player-style control panel for long-running jobs (training, inference, batch). Status badge + title/subtitle + progress + hardware metric strip (CPU/RAM/GPUs, extensible) + transport controls (start · pause · resume · stop) + live polling indicator. Designed to drive UIs that talk to a backend job and refresh every N ms.

Wraps a select-like control (Combobox / Select / MultiSelect / Input) with a tiny + icon in the top-right of the label row. Clicking it opens a modal with one input + Create / Cancel — no inline expanders, no bottom-of-the-card 'Add new' link. Use it for catalog-driven dropdowns where the user occasionally needs to add a new option without leaving the page.

Slide-in panel from the side. Use for long-form edits or 'details about a row' without leaving the page. Backdrop + Esc + click-outside dismiss.

Collapsible sections list. Single-open by default; pass `multiple` to allow several open at once.

Inline detail panel under a table row. v0.56 redesign: flush chrome by default (no card-in-card), ExpandedRow recess (panel-muted bg), tone-colored left rail, optional ExpandPanel.Section slots for grouping. Plus everything from v0.52 — slide animation, auto colSpan, Enter/Space, compound API, useExpandable hook.

Click trigger to open. Click outside, Esc, or pick an item to dismiss.

Searchable select with keyboard nav (↑/↓/Enter/Esc). Group keys cluster items under headings.

Searchable dropdown with multi-selection. Selected items render as primary-tinted pills inside the trigger; click × to remove or backspace on empty search to pop the last one.

Wrap your app in <ToastProvider>; call useToast().push(…) anywhere. Auto-dismiss in 4s by default.

Single mode and range mode. Range: pick start, hover to preview, then pick end. Click an earlier date during step 2 to restart. Default width is 'auto' (sizes to content); pass width='full' to align edges with sibling Input/Select inside FormGrid.

Launcher tile from the hub.vectorstack.us dashboard. Each tile has a colored icon-box (alpha-tinted from one hue) and a label; AppGrid wraps the responsive 2/3/6 column grid.

Split layout for auth pages — left form, right hero. Pass <HeroRibbon> for the canonical signature visual.

Click to open. Backdrop + Esc dismiss are wired by default.

Vertical primary nav. Density presets (`comfortable` default / `compact`), 5 badge tones, active rail, disabled items, focus-trapped mobile drawer, scroll fade, optional collapsible / resizable, SidebarGroup `autoOpen`, SidebarDivider for headerless grouping. Always paired with AppShell.

The full layout primitive. Compose: <AppShell topNav={...} sidebar={...} footer={...}>{children}</AppShell>. Sidebar is fixed 240px on desktop, drawer on mobile (controlled by `open`). Showcase mounts the whole thing inside a sized iframe-style box so it doesn't take over the page.

Compact icon-only button for toolbars + table row actions. No background in idle (just a colored icon), soft tinted bg on hover, focus ring. Set `action` to pick a built-in (save/delete/refresh/etc) — wires the icon, tone, aria-label automatically. Or pass `icon` + `tone` for custom.

Icon-only sibling of `ActionIcon` styled like the icon-box from `InfoCard`: tinted bg + border in the action's tone, hover halo with `-translate-y-px` lift, focus ring. Use it when a bare `ActionIcon` feels too small or you want an action that reads as a tile. Acts as a `<button>` (or `<a>` when `href` is set).

Pair a live preview with a panel of controls (PropsPlayground) for exploring an API; or document the props formally (PropsTable). Both ship in the DS so the same patterns work in any consumer's docs.

SVG-animated ribbon — the signature visual on `nexus360.us`. Three variants: `default` (animated, masked left), `full` (animated, edge-to-edge), `quiet` (static — same paint, no animation). Wrapper MUST be `position: relative` + `overflow: hidden`. Honors `prefers-reduced-motion` automatically.