The canonical shadcn registry for Exponential UI components and blocks. Live previews, examples, and install snippets for every published item.
Segmented button primitive for compact grouped controls. Each segment uses the outline button surface, keeps a stable border, and applies hover fill only to the hovered segment.
DocsAccessible color picker with saturation/brightness area, hue slider, format dropdown (Hex/RGB/HSL/HSB/CSS), native screen eyedropper (Chromium), and a recently-used swatch row. Popover-backed trigger.
DocsRight-click menu primitive built on Radix ContextMenu. Use it for contextual actions on rows, tabs, canvases, and custom surfaces.
DocsPopover date picker with chrono-node text parsing, day calendar selection, and scrollable month, quarter, half-year, and year period tabs.
DocsSelection-summary trigger for select, dropdown, and future multi-select surfaces. It uses button-safe slot composition and a visual-only selected state.
DocsAccessible single-choice picker built on Radix `Select`. Compose `SelectTrigger` + `SelectContent` + `SelectItem` (and optional `SelectGroup` / `SelectLabel` / `SelectSeparator`). The content portals to the body and anchors to the trigger — use `position="popper"` to follow the trigger on scroll/resize. Sizes match the Button/Toggle scale so triggers line up inside dense rows and popover surfaces.
DocsLightweight shimmer text primitive for loading states and subtle emphasis. Uses Exponential UI foreground tokens by default.
DocsCompact identity stack for teams, assignees, and participant lists. It composes the shared avatar primitive with overlap and optional overflow count.
DocsLayout helper that preserves a stable media frame before content loads. Useful for image cards, embeds, and thumbnail grids.
DocsNavigational trail showing the current location in a hierarchy of links. Compose links, separators, and the current page directly instead of hiding the structure behind a wrapper prop.
DocsCompact workflow-state glyph for triage, backlog, todo, started, completed, and canceled states, with circle and project-status hexagon variants.
DocsCoordinates multiple toggles into a single segmented control or spaced option row. Supports inherited size, variant, and optional item spacing.
DocsA single `SidebarGroup` — label, optional action, menu items, badges, and sub-items. The building block of a sidebar nav. Use this page to refine what one group should look like before composing a full sidebar block.
DocsTop-of-page header for the main surface of an `AppShell`. Ships the primary row — sidebar toggle (auto-hides when the sidebar is open), breadcrumb slot, inline actions, and a right-aligned trailing slot for global page actions — above a flex-column outer container that can host an optional lower row for tabs or context controls.
DocsSearchable single or multi-select picker panel with optional nested command menus. Composed from Command and Popover with a pluggable trigger via asChild.
DocsBoard-view structure for grouped records with a generic drag/drop layer. Provides a shared column grid, sticky-ready column headers, spanning group headers, persistent column lanes, quiet empty lanes, plus wrapper components that resolve same-lane reorder, cross-lane safe drops, and modifier-key positioned drops.
DocsCompact board-view card for records. Provides the reusable card shell, header/action slot, metadata, title row with leading status, optional description, inline action slots, flexible badge row, and footer metadata while leaving field chips, assignee UI, and interactions to composed primitives.
DocsAnchored popover for per-view display settings. Built as a set of compositional primitives on top of `Popover` and `Tabs`. Owns the popover chrome plus four item shapes — fill-space tabs, row, sub-row, and toggle-chip group — and delegates the controls inside those slots (Button, Select, Switch, Toggle) to consumer-provided primitives. Pair with `<Tabs>` + `<TabsContent>` around groups to swap which controls render per view (List / Board) and wire `onValueChange` into your app's view switcher.
DocsPopover body grammar for advanced filters. Compose condition chips, group-level and/or joins, removable nested groups, and add-filter actions up to three group depths.
DocsCompact filter surface for active filters, advanced filter triggers, and scoped actions. Built from ButtonGroup segments so each filter keeps a stable outline and per-segment hover fill.
DocsNested filter builder. Walk a tree of groups, search within each level, toggle per-group selections, and surface a dynamic query-action row when typed text should become an action.
DocsPopover-backed icon, emoji, color, and frequently-used picker with registry-owned default metadata plus app-provided override hooks.
DocsSaved-view metadata editor for title, description, icon, and icon color. Compose filter summaries and display controls as children so persistence and table state stay consumer-owned.
DocsLarge resource creation dialog with icon, title, summary, metadata slots, and a Plate editor body. Optional Editor AI support can use the full draft as context.
DocsCompact sectioned row editor with headers, hover actions, editable rows, drag affordances, and an icon-color picker that reuses the Icon Picker palette.
DocsCanonical data workflow block powered by @exponential-ui/data. Ships the production Data Table API plus page shell, toolbar, saved views, filters, advanced filtering, sorting, pagination, grouping, editable cells, row selection, loading/empty/error states, Table layout, Board layout, and lower-level helpers.
DocsPlate Plus frontend editor from Potion with the editable surface, plugin kits, node UI, data-driven mentions, explicit media upload adapters, and client AI affordances. Install @exponential-ui/editor-ai to add real AI routes.
DocsServer companion for the Plate Plus editor. Installs Vercel AI SDK 5 route handlers for the AI menu and copilot while keeping the base editor block frontend-safe.
DocsSettings-page composition for AppShell. Ships the settings nav plus reusable page, header, section, and row primitives for building dense settings sections.
DocsReady-to-go workspace navigation sidebar with a header workspace switcher, top-level flat items, multiple collapsible labeled sections (each with its own `TreeView` for drag/reorder), nested folders with a `maxDepth` cap, kind-aware drop gates, and a footer slot. Drag/drop is scoped per section — rows never move across section boundaries. **Row patterns** (set per item via the `WorkspaceSidebarItem` shape): - **Leaf** — `{ id, label }` with no `children`. Renders as a clickable `SidebarMenuButton` and fires `onActiveChange(id)` on click. Supports `icon`, `badge`, and `suffix`. Use for any row that should just navigate (e.g. `Inbox`, `My issues`). - **Folder** — `{ id, label, children: [...] }`. Renders as a muted, collapsible group header (with the folder glyph + a rotating triangle). Clicking the row only toggles expand/collapse — folder headers are intentionally **not** clickable as links. To pre-collapse a folder, set `defaultExpanded: false`. Supports nesting up to `maxDepth`. - **Empty folder** — `{ id, label, children: [] }`. Same as folder but renders an inline `"No items"` placeholder when expanded. Drop targets still accept rows dragged in (when the parent section has `draggable: true`). **Section actions** (set per section via the `WorkspaceSidebarSection` shape): - **No action** — omit both `allowCreateFolder` and `action`. The section header is a plain collapsible label. - **Built-in `+ folder`** — `allowCreateFolder: true` renders a `FolderPlus` icon button in the section header that inserts an inline rename input at the top of the tree; submitting fires `onSectionItemsChange` with the new folder. - **Custom action button** — pass any node via `action` (typically a `<SidebarGroupAction>` wrapping a `<Button>` or icon). Use this for `+ team`, `+ project`, or any section-specific create. `action` takes priority over `allowCreateFolder`.
DocsNotifications inbox popover, built as a set of compositional primitives. `Inbox` owns the Popover + a context providing `activeId` / `onActiveChange`; the header is backed by `PageHeader`, and every row and meta piece is its own primitive so consumers compose the exact layout they need. Rows expose three visual states — active (`bg-tertiary`), unread, and read (`fg-tertiary`). Clicking a row activates it without closing the popover; the unread dot animates out on activation. `InboxItem asChild` lets you drop in any router Link (Next, Remix, React Router).
Docs