Components

Expandable content sections with smooth animations. Perfect for FAQs, settings panels, and collapsible content.

Container component for grouping related content with header, body, footer, and optional header action slot.

Single collapsible section for progressive disclosure. Use when you need a standalone expand/collapse without the list structure of Accordion.

Resizable panels with drag handles built on react-resizable-panels. Supports horizontal and vertical layouts.

Custom scrollbar area with styled scrollbars. Use viewportRef to access the inner viewport element.

Visual separator line for dividing content sections. Can be horizontal or vertical. Decorative by default (hidden from accessibility tree).

Display important messages and notifications with different severity levels. Supports icons, actions, and rich content.

Persistent top-of-page notification for announcements, warnings, or promotional messages. Supports controlled visibility.

Pending state wrapper that blocks pointer/click/keyboard events and sets aria-busy while an async operation is in progress.

Linear progress bar for showing task completion. Built on Radix Progress. RTL flips the fill direction automatically.

Loading skeleton placeholder. Extends div — size and shape are set via className. Use while async content is loading.

Loading spinner using Loader2Icon with spin animation. Has role="status" and accessible label via useUiLabels.

NotificationToast component. See Storybook for full documentation.

Sonner component. See Storybook for full documentation.

Toast component. See Storybook for full documentation.

Modal dialog for irreversible or high-impact actions that require explicit user confirmation, like deleting data.

Modal dialog for displaying content that requires user attention. Focus is trapped, Escape closes, and aria attributes are wired automatically.

Slide-out drawer panel built on Vaul. Supports snap points, multiple directions, and a drag handle.

Hover-triggered floating card for displaying rich preview content like user profiles or link previews.

Floating panel anchored to a trigger. Use for inline content like date pickers, color pickers, or low-stakes confirmations.

Automatically renders as a Drawer on mobile and a Dialog (or Popover) on desktop. Ideal for shared desktop/mobile UI.

Side panel overlay that slides in from any edge (top, right, bottom, left). Dialog-based, not gesture-based.

Contextual information on hover or focus. Use LazyTooltip for performance in lists. Includes TooltipProvider for delay configuration.

User profile picture with fallback initials, optional badge, and group stacking. All exported from a single subpath.

Small status indicators and labels for UI elements. Supports 7 semantic variants including success, caution, and info.

Image and content carousel built on Embla. Supports horizontal/vertical orientation and programmatic API access.

Compound empty state component for no-data screens. Compose with EmptyMedia, EmptyHeader, EmptyTitle, and EmptyDescription.

Convenience empty state component from the empty-content subpath. Pass icon, title, and description as props instead of composing manually.

Flexible list item component with media, content, title, description, actions, and group support.

Keyboard shortcut display component. Use KbdGroup for multi-key combinations. Styling adjusts automatically inside tooltip content.

Semantic table component with styled header, body, footer, rows, cells, and caption. All sub-components extend native HTML elements.

Tree view component for displaying hierarchical events and tool calls. Ideal for agent trace UIs.

PDF preview component with zoom, navigation, and optional download/open-in-new-tab toolbar. Requires react-pdf peer dependency.

BadgeNumber component. See Storybook for full documentation.

ConnectionChip component. See Storybook for full documentation.

List component. See Storybook for full documentation.

Presence component. See Storybook for full documentation.

Navigation breadcrumbs showing the current page location with RTL-aware separators and ellipsis for collapsed paths.

Command palette for quick navigation and actions. Built on cmdk. Typically opened with ⌘K.

Dropdown menu for actions and navigation with full keyboard support, submenus, checkboxes, and radio groups.

Menu bar navigation for application-level actions with submenus, checkboxes, radio groups, and keyboard shortcuts.

Pagination controls for navigating through pages of content. Active page uses the outline button variant.

Full-featured app sidebar with collapsible behavior, icon mode, keyboard shortcut (⌘B), mobile drawer, and cookie-persisted state.

Multi-step process indicator with navigation controls, validation gating, and horizontal/vertical orientation.

Tabbed navigation with 4 visual variants (default, ghost, line, nav). Includes ScrollableTabsList for overflow-scrolling tab bars.

Interactive button component with 6 variants, 5 sizes, and asChild support for polymorphic rendering.

Group of related buttons with connected styling and optional separators. Supports horizontal and vertical orientation.

Date picker calendar built on react-day-picker. Supports single date, range, and multi-month modes.

Checkbox component for selecting multiple options. Supports indeterminate state and is built on Radix UI.

Searchable dropdown with fuzzy filtering. Selecting the same value clears the selection. Portals content for proper z-index stacking.

Inline editable text with preview and edit modes. Supports click, double-click, or focus activation and optional toolbar.

Faceted filter component for advanced single or multi-select filtering. Displays selected values as badges in the trigger.

File upload component with drag-and-drop dropzone, file list, progress tracking (linear, circular, or fill), and upload callbacks.

Form wrapper built on React Hook Form. Automatically wires id, aria-describedby, and aria-invalid from field state.

Text input field accepting all native <input> HTML attributes. Pair with Label, Form, or InputGroup for complete form controls.

Input with prefix text, suffix text, icon addons, and inline buttons. Supports all four positions: inline-start, inline-end, block-start, block-end.

Accessible form label built on Radix Label. Always pair with form controls using htmlFor/id for accessibility.

@mention rich text input built on TipTap. Supports fuzzy-filtered suggestions and a template syntax option.

Multi-select dropdown displaying selected values as deletable badges. Supports search, clear-all, and custom badge variants.

Radio button component for single selection from multiple choices. Built on Radix RadioGroup with full keyboard support.

Accessible dropdown selection component with groups and labels. For searchable selection, use Combobox.

Range slider for selecting numeric values or a range. Built on Radix Slider. Pass an array to value for range mode.

Toggle switch for binary on/off states. Built on Radix Switch. Supports preventFormControl to avoid parent form interactions.

Multi-line text input accepting all native <textarea> HTML attributes. For auto-resizing, use TextareaAutosize.

Auto-resizing textarea built on react-textarea-autosize. Grows with content and optionally shows a skeleton while loading.

Toggle button for on/off states. Built on Radix Toggle with default, outline, and secondary variants.

Group of toggle buttons for single or multiple selection. Each item can override variant and size individually.

Button with an integrated tooltip. Uses LazyTooltip by default. Renders as a plain Button when no tooltip prop is provided.

Hierarchical suggestion menu for nested selections. Displays grouped options in a tree-like suggestion interface.

Drag-and-drop sortable list built on dnd-kit. Supports vertical, horizontal, and mixed layouts with rich screen reader announcements.

Accessible hidden input that dispatches synthetic events for native form serialization. Use in custom form controls.

Expands the click/touch target of a small element without affecting its visual size. Use for icon buttons and small interactive elements.

Scroll position tracker that highlights navigation based on which section is in view. Updates browser hash on scroll.

FeatureHighlightDialog component. See Storybook for full documentation.

FeatureHighlight component. See Storybook for full documentation.

InAppOverlay component. See Storybook for full documentation.