Components

Vertically stacked set of headings that each reveal a section of content. Built on Radix Accordion.

Inline status callout for non-blocking messages. Five variants: default, success, warning, info, destructive — each uses the solid pattern on the pastel base.

Modal confirmation for destructive or irreversible actions. Blocks interaction until the user chooses.

Locks child content to a fixed width-to-height ratio. Useful for media embeds and image placeholders.

User identifier — image with a fallback initial, an optional status dot, and a stacked group with overflow count.

Small inline label for status, counts, or category. Seven variants covering brand, neutral, and the four status hues.

Hierarchical navigation showing the user's path. Last item is the current page (non-link).

Primary interactive trigger. Six variants × four sizes plus icon-only and disabled states.

Horizontally adjacent buttons that read as a single control. Supports inline separators and inline text.

Date picker calendar grid. Single, multiple, and range selection modes via the same primitive.

Raised content surface with header, content, footer, and optional action slot.

Horizontal scroller with previous/next controls. Powered by Embla.

Recharts wrapper with theme-aware tooltips and legends. Series colors come from the --chart-1..12 categorical palette anchored to brand lavender.

Binary or tri-state toggle. Supports unchecked, checked, indeterminate, disabled, and aria-invalid states.

Single-region show/hide. Lighter than Accordion when only one section needs to expand.

Popover-anchored hex color picker built on react-colorful. Optional alpha and brand swatch grid.

Headless typeahead primitive — composable parts (input, list, items, groups, chips). Backbone for the data-combobox variants.

Searchable command palette with keyboard navigation. Renders inline or inside a Dialog.

Right-click menu attached to a region. Shares item types with Menubar and DropdownMenu.

Copy-to-clipboard button with auto-resetting check icon. Inherits Button variants and sizes.

Single-select combobox driven by a data array (with optional groups). Wraps the headless Combobox primitive for the common case.

Multi-select combobox with chip-style selected values and grouped options. Same data shape as data-combobox.

Headless TanStack-Table-powered table with sortable columns and optional pagination. Built on the table primitive.

Calendar + popover composition for picking a single date. Optional inline time picker.

Date-range variant of date-picker. Returns from/to via a single value object.

Modal overlay for focused tasks. Composes header, body, and footer.

RTL/LTR direction provider that scopes Radix's direction context. Useful for locale-aware layouts.

Bottom-anchored sheet for mobile-first interactions. Supports gesture-driven dismissal.

Trigger-anchored menu with items, checkboxes, radio groups, separators, and shortcut hints.

Placeholder block for zero-state regions. Composes media, title, description, and a call-to-action.

Form field primitive with label, description, error message, and orientation control. Wrapper for Input/Textarea/Switch.

Non-modal preview surface that opens on hover or focus. Good for link previews and avatar peeks.

Single-line text input. Demos default, disabled, invalid, and file states.

Input with prefixed/suffixed addons (icons, text, kbd hints, action buttons).

Segmented one-time-password input with separator slots. Pattern, length, and value all controlled.

Composable list-row primitive. Slots for media, title, description, and trailing actions.

Collapsible JSON tree with type-aware coloring, line numbers, indent guides, and link/email auto-detection.

Inline keyboard shortcut hint. Use KbdGroup for multi-key chords.

Form label primitive. Pairs with Input/Textarea/Switch via htmlFor.

Top-of-window menu bar à la macOS. Each MenubarMenu opens an inline menu.

Browser-native select element with shadcn styling. Use when system pickers are preferred (mobile, accessibility).

Horizontal navigation with optional rich content panes. Used for site headers.

Page-number navigator with previous/next, ellipsis, and active-state styling.

Anchor-positioned floating surface for short-lived UI like form snippets and emoji pickers.

Determinate progress bar. Demos value control plus indeterminate state.

Mutually exclusive choice group. Pairs each item with a Label for accessibility.

Drag-to-resize panel layout. Horizontal and vertical orientations with optional drag handle.

Custom-styled scroll container. Replaces native scrollbars for visual consistency.

Custom select with grouped options, separators, and keyboard support. Built on Radix Select.

Thin divider for visual grouping. Horizontal default; vertical with explicit orientation prop.

Side-anchored panel. Supports left/right/top/bottom positioning via the side prop.

Collapsible app-shell sidebar with header/content/footer slots, menu primitives, and an inset main area. Supports floating/inset variants.

Loading placeholder with subtle lavender shimmer. Uses --skeleton-bg + --skeleton-shimmer tokens.

Range input with single or multi-thumb modes. Demos value control, range mode, and disabled state.

Toast notifications via Sonner. Default, success, error, and action variants.

Indeterminate loading indicator. Inherits color from currentColor.

Binary on/off toggle for settings. Demos checked, unchecked, disabled, and aria-invalid.

Tabular data primitive. Composable header/body/row/cell with caption and right-aligned columns.

Tabbed content switcher with icon support. Single-selection group of mutually exclusive panes.

Multi-line text input. Demos default, disabled, invalid, and resizable variants.

next-themes wrapper bundle: ThemeProvider for the app root, Theme.Toggle for asChild trigger composition, and ThemeToggle for a default sun/moon button.

Hour/minute/second column picker with optional AM/PM and configurable steps. Composable into popovers or used inline.

Vertical event list with date markers. Composes header, title, date, and description per item.

Two-state pressable button (e.g. bold/italic). Variants: default, outline.

Group of Toggles with single or multiple selection modes. Variants: default, outline.

Brief explanatory popup on hover/focus. Configurable side and offset.