Browse the whole system.

A vertically stacked set of collapsible sections, each with a trigger header that toggles its content panel open or closed.

GitHub-style activity grid with density-aware cell sizing, circle/rounded/square shapes, and brand intensity buckets.

Ring visualisation with two modes: a single-value score gauge (value) or an interactive segmented donut (segments) with hover/pin, tooltip, legend, and draw-in.

A compound alert component for surfacing inline feedback messages with an optional title, description, icon slot, and action button. Intent tones (success, warning, destructive) follow the semantic tokens.

Deterministic animal-name + OKLCH gradient from a seed string.

A single variant-driven application layout primitive, one `variant` prop swaps between ten full page scaffolds, each composed from the app-shell header / nav / sidebar / panel / toolbar / aside / footer / content slots.

A framed surface for presenting generated artifacts (code, files, canvases) in a chat with a titled header, tooltip actions, a close button, and scrollable content.

Container that locks child content to a fixed width-to-height ratio via CSS custom property.

A compound component for displaying file, media, and source-document attachments in grid, inline, or list layouts with previews, remove buttons, and hover-card details.

A compound avatar component built on Base UI primitives, supporting image display with fallback text, an optional badge indicator, and grouped avatar stacks.

A small inline label component with multiple semantic variants (default, secondary, destructive, success, warning, outline, ghost, link) built on Base UI's useRender for polymorphic rendering.

Prominent inline status message with tone (info/success/warning/critical), title, body, actions, and dismiss. Distinct from the compact alert.

A compound navigation component that renders an accessible breadcrumb trail with support for links, the current page, separators, and an ellipsis for collapsed items.

A polymorphic button component built on Base UI with CVA-powered variant and size styles, supporting icon-only sizes and custom render targets.

Joins related buttons into one segmented control with shared, overlapped edges, horizontal or vertical.

Date picker built on react-day-picker, dressed in byronwade/ui tokens, selection follows --brand, the range bar uses bg-accent, and nav + day cells reuse buttonVariants. Supports single, multiple, and range modes.

A React Flow node-graph surface with opinionated interaction defaults and a token-driven, pattern-configurable background for agent/workflow UIs.

A composable card container with header, title, description, action, content, and footer sub-components, supporting a compact "sm" size variant.

Embla-powered carousel with keyboard navigation, previous/next controls, and horizontal or vertical orientation.

One centerpiece + floating card; first-run & single-action tools.

A collapsible, step-by-step reasoning trace for AI responses with status-coded steps, search-result chips, and captioned image wells.

A Recharts wrapper that injects CSS color variables from a config map and provides tooltip and legend sub-components styled to match the design system.

A styled checkbox input built on Base UI's headless Checkbox primitive, rendering a checkmark indicator with focus, disabled, and validation states.

A conversation checkpoint marker that pairs a bookmark icon with a tooltip-enabled restore trigger and a trailing separator.

YouTube-style single-select horizontal filter chip bar with edge fade and scroll affordance.

clsx + tailwind-merge class combiner.

Syntax-highlighted code surface with light/dark Shiki rendering, optional line numbers, and a copy-to-clipboard button (adapted from Vercel AI Elements).

Expand/collapse region with trigger and animated panel.

HSL color picker, 2D field + hue/alpha sliders, eyedropper, hex/rgb/css/hsl output. Adapted from kibo-ui.

Filterable autocomplete on Base UI Combobox, input-group trigger, popup list, empty state, optional multi-select chips.

Command palette built on cmdk with dialog and input-group integration.

Compact rich result row for a command palette: media, title, description, meta, and an action slot.

A tool-call approval prompt that requests, then reflects, an accepted or rejected agent action using AI SDK approval state.

Token-styled React Flow connection line for AI canvas/workflow surfaces (adapted from AI Elements).

Hover-card token/cost usage meter for AI model context windows (adapted from Vercel AI Elements).

Right-click menu on Base UI ContextMenu, items, checkbox/radio groups, submenus, shortcuts, destructive variant.

Token-styled React Flow zoom / fit-view / interactivity control panel for AI canvas surfaces (adapted from AI Elements).

An auto-scrolling chat transcript that sticks to the bottom as messages stream, with content, empty-state, and scroll-to-bottom affordances.

Messaging conversation list, live search, All/Unread/Pinned filters with counts, a pinned section, bulk select + bulk actions, and rows with hover actions. Reads/acts through comms-store.

Flippable credit-card display (chip, number, expiry, CVV, mag stripe, payment icon). Adapted from kibo-ui.

Live collaboration cursor, pointer + name/message body, tinted via currentColor. Adapted from kibo-ui.

Single-date picker with an outline trigger that opens a popover calendar, controlled or uncontrolled, formatted with date-fns.

A resource detail page header that renders a title row with an optional badge and action buttons, followed by a responsive grid of label-over-value metadata columns.

A modal dialog compound component built on Base UI's Dialog primitive, with overlay, content popup, header, footer, title, description, and close button sub-components.

Drag-and-drop file/media upload with drag-over and rejected-file states, image preview thumbnails or a file list, and size variants.

A composable dropdown menu built on Base UI's Menu primitive, providing a trigger-controlled popup with support for items, checkboxes, radio groups, submenus, separators, and keyboard shortcuts.

React Flow custom edges: a dashed temporary connector and an animated edge with a brand dot traveling along the path.

Tiptap rich-text editor, bubble toolbar, slash menu, tables, task lists, code blocks. Adapted from kibo-ui.

A centered empty-state panel with a dashed border, optional icon chip, title, description, and an optional action slot.

A vertical "domain events" style timeline that renders a list of labeled events with toned status dots, optional descriptions, and monospaced timestamps connected by a vertical rule.

Form field layout primitives, FieldGroup, Field, label, description, error, fieldset/legend, and responsive horizontal orientation.

Collapsible file/folder tree with selection, sorting, and expand-all, plus a panel variant (chevron disclosure, guide lines, count badges) and multi-select with cascading checkboxes, rebuilt on Base UI. Base from MagicUI; panel/multi-select inspired by Untitled UI.

Pill-with-chevron filter / range selector control.

Complete token base, neutrals + brand-derived accent, status/dock/chart/sidebar tokens, radius scale. Install via `shadcn init`.

Draggable timeline / roadmap chart, sidebar, multi-range header, status-tinted feature bars, milestone diamonds, today line. Auto-centers on today; a GanttControls toolbar drives timescale + zoom, with density and read-only presentation variants. Adapted from kibo-ui.

Link/preview hover card (title, description, image) on the house hover-card. Adapted from kibo-ui.

Radial-gradient avatar disc derived deterministically from a seed.

A compound component that displays a floating preview card when hovering over a trigger element, built on Base UI's PreviewCard primitive.

Renders an AI-generated image from the Experimental_GeneratedImage shape as an edge-framed, radius-clipped data URI (adapted from AI Elements).

Crop a File to a PNG (react-image-crop + canvas); apply/reset controls. Adapted from kibo-ui.

Filter bar for an index: saved-view tabs, search, sort dropdown, and removable applied-filter pills. Pairs with index-table / resource-list.

Sortable, row-selectable data table with an integrated bulk-action bar, sticky header, loading and empty states, and pagination. The signature Shopify-admin index.

Inline text citations that reveal a hover card carousel of grounded sources with titles, URLs, and quotes (adapted from Vercel AI Elements).

A styled text input field that wraps Base UI's Input primitive, supporting all native HTML input attributes with consistent focus, disabled, and validation states.

Grouped input shell with aligned addons, buttons, and embedded controls.

One-time-password input with grouped slots, caret blink, separator, and aria-invalid styling.

Drag-and-drop kanban board with columns + sortable cards. Adapted from kibo-ui.

Keyboard-key indicator with sm/default/lg sizes; KbdGroup joins keys into a shortcut sequence. Mono, token-driven.

A styled wrapper around the native HTML label element with consistent typography and disabled-state handling.

Spinning multi-opacity loader for AI/agent surfaces (adapted from AI Elements).

Pure, DOM-free market helpers for the TradingView-style set: chart geometry (candles, depth, polyline/area paths), price/percent/volume formatting, change tones, and deterministic seeded mock generators (candles, quotes, order books, series).

Chat message primitives for AI conversations, provenance labels, bubbles, actions, branch navigation, attachments, and a streaming markdown response.

Messaging composer, auto-growing textarea, Enter to send, Shift+Enter newline, attachment affordance, and optional template/schedule callbacks. Calls send on comms-store.

Messaging thread pane, contact header, scrollable in/out bubbles with delivery ticks, reaction chips, and an empty state when no conversation is selected. Reads/acts through comms-store.

Label + large value + delta badge metric row.

A searchable command-palette dialog for choosing an AI model, with provider logos, grouped items, and keyboard shortcuts.

Full-width top navigation bar that blooms a panel down via the morph technique.

Slim menubar that blooms the active menu's dropdown in place via the morph technique.

Right icon rail that blooms a wide labeled panel to the side via the morph technique.

Left icon rail that morphs wider into a labeled sidebar via the morph technique.

Agnostic morph primitive, open-state orchestration (refs, cross-fade, Esc/outside-close, box sizing) with no visual style. Navigation styles compose it.

Bottom tab bar that blooms a sheet up via the morph technique.

A config-driven morphing navigation dock. The item row morphs compact ↔ full, and the whole pill blooms in place into a consumer-provided panel via useChromeMorph, items, badges, core/pinned flags, a trailing cluster, and a contextual action. Pure --dock tokens, reduced-motion + Esc + click-away.

A styled native <select> with an inline chevron and the standard input edge + focus ring, token-driven, no icon dependency.

Accessible site navigation with animated dropdown panels.

A React Flow node rendered as a Card with editorial header/footer and token-styled source/target connection handles.

Numeric input with increment/decrement, clamping, scrub, and formatting, built on Base UI. Token surfaces, Phosphor steppers.

A dropdown menu that opens the current prompt or query in external AI chat providers (ChatGPT, Claude, Cursor, Scira, T3, v0).

A dashboard page heading that renders a title, optional subtitle, and optional action slot in either a left-aligned (start) or centered layout.

Accessible pagination nav with previous/next links, page links, and ellipsis.

A React Flow overlay panel that floats over the flow canvas, pinned to a configurable corner.

Rounded pill with avatar/status/indicator/delta parts; tones map to semantic tokens. Adapted from kibo-ui.

Renders an image as an interactive grid of dots that distort around the pointer. Token-friendly defaults. Adapted from Aceternity UI.

Collapsible plan card for AI/agent surfaces with a streaming-aware title and description (adapted from AI Elements).

A floating popover panel built on Base UI that renders anchored content next to a trigger element with configurable side and alignment positioning.

Histogram + range slider + min/max number inputs + apply button. Composes slider, number-field, button. Adapted from a coss.com UI block.

A linear progress bar built on Base UI that displays a labeled, accessible indicator of completion with optional label and numeric value display, plus token-driven intent tones (brand, success, warning, destructive).

A composable AI chat prompt input with density-aware composer layout, textarea, file attachments, action menu, model select, speech-to-text, and slash-command primitives built on byronwade/ui input-group, select, dropdown-menu, hover-card, and command.

Token-colored QR code (modules use --foreground/--background, re-skins with the theme). Adapted from kibo-ui.

A collapsible task-queue surface for AI agents, with pending/completed status indicators, descriptions, hover action buttons, and image/file attachments.

A radio group component built on Base UI primitives that renders a group of mutually exclusive radio buttons in a vertical grid layout.

Interactive star rating (keyboard + hover) + a read-only RatingBadge (score + star). Adapted from kibo-ui.

A collapsible "thinking" trace for AI responses that auto-opens while streaming, records elapsed seconds, and renders its markdown reasoning through Streamdown.

Multi-timezone live clock, per-zone time/date with mono labels, ticking each second. Adapted from kibo-ui.

Drag-to-resize panel groups with horizontal/vertical orientation and optional handle, react-resizable-panels.

List-view of selectable rich rows (ResourceList + ResourceItem), media, title, metadata, badges, hover actions, bulk selection. The list counterpart of index-table.

Custom-styled scrollable viewport with optional scrollbars built on Base UI.

A titled settings-style content block with an optional header action, rendering a labelled section heading above a bordered card body; ships with companion SettingsList and SettingRow compound components for building explain-everything config panels.

Inline segmented toggle (Referrer · Links · Campaign style).

An accessible dropdown select built on Base UI's Select primitive, composed of compound parts (trigger, content, items, groups, labels, separators) with animated popover positioning and keyboard navigation.

A thin horizontal or vertical dividing line built on Base UI's Separator primitive for visually separating content sections.

Slide-over panel dialog anchored to any screen edge.

Animated text-shimmer that sweeps a token-driven light gradient across muted text for AI thinking/streaming states.

Horizontal carousel of cover cards that expand into a detail modal — token surfaces with the edge hairline + depth, mono metadata eyebrows over editorial titles, Phosphor controls, focus-visible rings. Adapted from Aceternity UI.

Collapsible application sidebar with provider, mobile sheet fallback, icon/offcanvas modes, menu groups, and ⌘/Ctrl+B shortcut.

A pulsing placeholder div used to indicate loading state before content is available.

Single or range slider built on Base UI, one thumb per value, token track/indicator, keyboard + a11y.

A themed toast notification provider that wraps the Sonner Toaster with @wrksz/themes integration and custom Phosphor icons for success, info, warning, error, and loading states.

A collapsible citation list that reveals the sources an AI response was grounded in, built on the Base UI collapsible primitive.

Pure-CSS loading spinner in currentColor (sm/default/lg) with role=status and an accessible label.

Summary column + vertical rail archetype shell.

A compact metric tile displaying a labeled value with an optional icon, delta trend pill, and muted hint line.

Atomic status indicator dot with tone + optional pulse.

A colored-dot-plus-label chip that communicates status at a glance using a soft tinted background and a matching StatusDot.

A horizontally-scrolling row of clickable prompt pills that surface suggested actions for an AI chat or agent surface.

A toggle switch component built on Base UI's Switch primitive that supports two sizes and accessible checked/disabled states.

Table system: a styled, accessible HTML table primitive with scrollable container, density and layout variants, plus the DataTable admin shell (index filters, bulk selection, sortable columns, pagination).

A compound tabs component built on Base UI that renders a tabbed interface with optional horizontal or vertical orientation and two list variants (default pill or underline line).

Tags field, type to add chips (Enter/comma), remove with × or Backspace, optional autocomplete suggestions, semantic tag tones, sizes, and error state.

A collapsible task log showing an AI agent's step-by-step actions with inline file chips, ported from Vercel AI Elements.

A styled textarea element that auto-sizes to its content and supports focus, disabled, and invalid states via standard HTML textarea props.

Video thumbnail tile with optional duration pill, watched-progress bar, and live chip.

Stock/crypto ticker, icon, symbol, formatted price, up/down change. Adapted from kibo-ui.

Vertical event/timeline rail with connectors and terminal marker.

Two-state pressable toggle button with variant and size styles.

Single- or multi-select group of toggle buttons sharing variant/size context.

Collapsible tool-call card that shows a tool's status, JSON parameters, and result or error output for agent chat UIs.

A token-driven floating action toolbar that attaches to a React Flow custom node, with horizontal/vertical orientation variants.

A compound tooltip component built on Base UI that shows a floating label near a trigger element with animated entry/exit transitions.

The shared morph hook for floating chrome, a toolbar pill, launcher, or nav dock. It animates a container's width/height/border-radius between its collapsed box and an open panel on a tuned curve, cross-fading rest↔panel, then shrinks cleanly back. Position-agnostic and reduced-motion aware.

Hook that tracks viewport width against a 768px breakpoint for responsive sidebar and layout patterns.

Hook that fires a callback on pointer/touch interactions outside a ref. Adapted from Aceternity UI.

Multi-step verification status tracker with tone-colored steps, optional counts, and connecting rails.

media-chrome player with default/minimal/theater/poster variants. Adapted from kibo-ui.

An embedded browser-style web preview with URL bar, navigation, and a console log for AI-generated sites (adapted from AI Elements).