Exponential UI

Status message primitive for inline notices, warnings, and errors. Installs to the stock shadcn alert path, so existing apps should review with `shadcn add ... --dry-run` and `--diff` before applying.

Disclosure primitive for expandable sections. Installs to the stock shadcn accordion path, so existing apps should review with `shadcn add ... --dry-run` and `--diff` before applying.

The primary action primitive. Nine variants and four sizes cover interaction, emphasis, and navigation. Pass a single icon as the only child to get a square icon-only button — no separate `icon` size needed.

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.

Date selection primitive built on react-day-picker and the Exponential UI button surface.

Container primitive composed of Header, Title, Description, Action, Content, and Footer parts. Compose them directly — variants live in the consumer.

Binary selection control with checked, disabled, and invalid states. Pair it with a Label via htmlFor for accessible forms.

Accessible 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.

Searchable command list built on cmdk. Use it as the foundation for command palettes, pickers, and quick-action menus.

Right-click menu primitive built on Radix ContextMenu. Use it for contextual actions on rows, tabs, canvases, and custom surfaces.

Popover date picker with chrono-node text parsing, day calendar selection, and scrollable month, quarter, half-year, and year period tabs.

Overlay primitive for focused modal tasks. Includes Radix-compatible dialog parts and responsive dialog helpers that render a drawer on mobile. Installs to the stock shadcn dialog path, so existing apps should review with `shadcn add ... --dry-run` and `--diff` before applying.

Selection-summary trigger for select, dropdown, and future multi-select surfaces. It uses button-safe slot composition and a visual-only selected state.

Anchored floating surface for picker panels, menus, and inline detail views. Compose Trigger + Content — Header/Title/Description are optional layout helpers.

Accessible 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.

Text input primitive. Thin wrapper around the native element with focus ring, invalid state, and dark-mode token support.

Accessible label built on `@radix-ui/react-label`. Forwards `htmlFor` and inherits disabled state from peers via data attributes.

Multi-line text input. Uses `field-sizing: content` so the box grows with the user's text without a resize handle fight.

Compact status label for short metadata, counts, and inline emphasis. Variants cover solid, outline, ghost, and link-like treatments.

Low-noise divider for related content. Ships as a thin primitive with horizontal and vertical orientations.

Succinct, opinionated toast notifications. Replaces the deprecated shadcn `toast` component. Mount one `<Toaster />` near the root and call `toast()` from anywhere — variants, descriptions, actions, promise tracking, and custom JSX are all built in.

Minimal loading glyph for inline pending states. Compose it inside buttons, empty states, or surface-level loading placeholders.

Lightweight shimmer text primitive for loading states and subtle emphasis. Uses Exponential UI foreground tokens by default.

Binary toggle for on/off settings (e.g. notifications, feature flags). Commit takes effect immediately — use a checkbox when the consumer needs to confirm via a separate submit.

Low-fidelity placeholder for loading content. Use it to reserve layout and communicate pending state without custom pulse markup.

Keyboard shortcut token for inline hints, command menus, and documentation surfaces. Use `KbdGroup` for chords and `KbdSequence` for ordered shortcuts.

Identity primitive with fallback, optional status badge, and size-aware styling. Use it for people, teams, and lightweight presence cues.

Compact identity stack for teams, assignees, and participant lists. It composes the shared avatar primitive with overlap and optional overflow count.

Layout helper that preserves a stable media frame before content loads. Useful for image cards, embeds, and thumbnail grids.

Navigational 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.

Linear progress indicator for bounded work. Use it when you can express a task as a percentage instead of an indeterminate spinner.

Compact workflow-state glyph for triage, backlog, todo, started, completed, and canceled states, with circle and project-status hexagon variants.

Range input primitive with one or more draggable thumbs. Built on Radix Slider and styled to match the Exponential UI control scale.

Resizable panel group, panel, and handle built on react-resizable-panels v4. Ships the unadorned Exponential UI handle plus the upstream imperative refs and layout hooks.

Data table primitive with Header, Body, Footer, Row, Head, Cell, Select, and Caption parts. Horizontal scroll is handled by the container; compose for everything else.

Organizes related content into switchable panels. The list supports outline and line variants, plus horizontal or vertical layouts.

Single pressed-state control for formatting, filters, and binary view options. Use it when one action can be on or off.

Coordinates multiple toggles into a single segmented control or spaced option row. Supports inherited size, variant, and optional item spacing.

Short contextual hint shown on hover or focus. Compose it with a provider, trigger, and content instead of custom hover markup.

Nested, keyboard-navigable tree for sidebars, file browsers, and settings panels. Optional drag-and-drop reordering and folder moves.

Dialog-backed side panel primitive used for mobile navigation, contextual sidebars, and lightweight task surfaces.

A 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.

Top-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.

Searchable single or multi-select picker panel with optional nested command menus. Composed from Command and Popover with a pluggable trigger via asChild.

Board-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.

Compact 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.

Anchored 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.

Popover 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.

Compact 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.

Nested 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.

Popover-backed icon, emoji, color, and frequently-used picker with registry-owned default metadata plus app-provided override hooks.

Saved-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.

Large 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.

Compact sectioned row editor with headers, hover actions, editable rows, drag affordances, and an icon-color picker that reuses the Icon Picker palette.

Saved-view navigation and ordering block. Render fixed system views, reorder editable saved views, create from search, and pair with ViewEditor for metadata editing.

Canonical 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.

Plate 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.

Server 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.

Runtime theme system for Exponential UI. Ships a root provider, flash-prevention script, theme hooks, saved-color helpers, and the full settings panel for interface theme, sidebar theme, font size, and pointer cursors.

Two-pane application shell with a resizable sidebar, main content surface, and optional bottom action bar. Drag the sidebar below half its minimum width to collapse it. Below 1080px the sidebar hides and the main surface goes full-bleed.

Settings-page composition for AppShell. Ships the settings nav plus reusable page, header, section, and row primitives for building dense settings sections.

Ready-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`.

Notifications 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).