The full catalog

Components

27 components, categorized below, plus the motion primitives, layout primitives, and theme foundation that everything else is built on.

The six gaps

The components shadcn/ui doesn't ship, and every real product needs.

Timeline

Compound vertical timeline (Timeline, TimelineItem, TimelineNode, TimelineContent). left and alternating variants, active/completed node states, fully token-driven, wraps cleanly with the Reveal motion primitive.

Stepper

Compound step indicator (Stepper, StepperItem, StepperIndicator, StepperContent). horizontal and vertical orientations, upcoming/current/complete states, optional clickable navigation, fully token-driven.

File Upload

Drag-and-drop + click-to-browse upload zone (FileUpload, FileUploadList, FileUploadItem) backed by a real, keyboard-operable input[type=file]. Per-file progress, remove, and type/size rejection.

Color Picker

Saturation/lightness area, hue and optional alpha sliders, hex + rgb/hsl text inputs, preset swatches, copy-to-clipboard. Every visual control is keyboard-operable; the text inputs are the accessible path of record.

Multiselect

Searchable multi-select combobox with chip display, arrow/enter/backspace-to-remove keyboard navigation, async-options-ready via onSearchChange + loading, a max-selection cap, and an optional create-new option. Follows the WAI-ARIA combobox-with-listbox-popup pattern.

Navbar

Compound site header (Navbar, NavbarLogo, NavbarLinks, NavbarActions, NavbarMobileTrigger, NavbarMobileDrawer). Transparent-to-solid on scroll (motion-safe), sticky, optional mega-menu, mobile drawer with a real focus trap and Escape/backdrop close.

Display

Presentational, low interaction surface.

Stat Card

Label, value, and a delta indicator (shape + color coded, not color-only), with optional icon and sparkline slot.

Empty State

Icon/illustration slot, title, description, and an action slot.

Avatar Group

Overlapping avatar stack with a +N overflow indicator and size variants.

Kbd

Keyboard shortcut display — a single key or a chorded combination.

Feature Grid

Icon + title + description cells on a responsive grid. Wraps the Grid layout primitive.

Logo Marquee

Infinite logo strip, grayscale to color on hover. Wraps the Marquee motion primitive, so reduced-motion behavior is inherited.

Testimonial Card

Quote, author, avatar, and role/company.

CTA Band

Headline, subtext, and an action slot on a token-driven background variant (default/primary/secondary).

Pricing Toggle

Monthly/annual segmented toggle for driving a pricing display.

Interactive

Real keyboard and focus management, verified with Playwright.

Command Menu

Cmd/Ctrl+K searchable command dialog, grouped results, aria-activedescendant keyboard nav, focus trap. Wraps Kbd for shortcut display.

Tag Input

Freeform tag entry — type and press Enter/comma to create, Backspace on empty to remove the last tag.

OTP Input

Segmented one-time-code entry backed by a single real input (paste-to-fill, native caret movement, one accessible input model instead of N separate boxes).

Rating

Star rating, ARIA radiogroup pattern with roving tabindex, optional read-only display mode.

Date Range Picker

Two-month calendar with keyboard grid navigation (arrows, Home/End, PageUp/PageDown) and range selection, following the WAI-ARIA date picker grid pattern.

Notification Center

Popover notification list with unread state (shape + color coded), mark-read/mark-all-read, and an aria-live announcement when new notifications arrive.

Filter Bar

Composable filter chips with per-chip remove and a clear-all action.

Toolbar

Compound grouped-actions toolbar (Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarButton) with role="toolbar" and arrow-key roving tabindex.

Data & layout

Trees, panes, charts, and layout variants.

Tree View

Expand/collapse hierarchy, WAI-ARIA tree pattern (role="tree"/"treeitem", roving tabindex, arrow-key navigation including ArrowRight/Left to expand/collapse or move to child/parent).

Split Pane

Two panes with a draggable, keyboard-resizable divider (role="separator", aria-orientation, arrow-key resize).

Footer Variants

Three footer layouts (FooterMinimal, FooterLinks with newsletter signup, FooterMega) sharing the same link-group data shape.

Charts

Token-themed Recharts wrappers (LineChart, BarChart, AreaChart, PieChart) — colors cycle through --chart-1..5, tooltip/legend/grid styled with theme tokens instead of Recharts' defaults.

Motion primitives

The scroll- and interaction-driven primitives every component above is built with.

Reveal

Fade + slide element into view as it scrolls into the viewport. Configurable direction, delay, and distance. Respects prefers-reduced-motion.

Stagger

Animate a group of children in sequence with a configurable stagger interval. Ships Stagger (container) and StaggerItem (child). Respects prefers-reduced-motion.

Parallax

Moves an element at an offset of the page scroll speed, tied to its own scroll progress. Respects prefers-reduced-motion.

Count Up

Tweens a number from a starting value up to its target once scrolled into view. Respects prefers-reduced-motion.

Magnetic Hover

Element drifts toward the cursor on hover with a spring, snapping back on pointer leave. Respects prefers-reduced-motion.

Marquee

Infinite horizontal scroll of its children, pausable on hover. Renders a static single row when reduced motion is preferred.

Page Transition

Wraps route content in an AnimatePresence fade/slide transition keyed on pathname. Respects prefers-reduced-motion.

Layout primitives

Container, rhythm, grid, and stack: the structural layer.

Container

Max-width wrapper with responsive horizontal padding, tied to --container-max / --container-max-wide.

Section

Vertical rhythm wrapper, tied to --spacing-section-y / --spacing-section-y-sm.

Grid

Responsive column presets (1/2/3/4/auto) with a tokened gap scale. The auto preset uses --grid-auto-min for its minimum column width.

Stack

Vertical or horizontal flex stack with a tokened gap scale.

Split

Two-pane layout that collapses to stacked below a configurable breakpoint.

Foundation

Six theme variants and the reduced-motion hook every motion primitive shares.

Deepmoon

Theme

Deepmoon Violet

Theme

Deepmoon Emerald

Theme

Deepmoon Amber

Theme

Deepmoon Rose

Theme

Deepmoon Slate

Theme

useReducedMotion

Hook