Component Status Dashboard

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

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

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

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.

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

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

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.

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

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

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

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

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

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

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.

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

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

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.

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.

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

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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.

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

FeatureHighlightDialog component. See Storybook for full documentation.

FeatureHighlight component. See Storybook for full documentation.

BadgeNumber component. See Storybook for full documentation.

ConnectionChip component. See Storybook for full documentation.

List component. See Storybook for full documentation.

NotificationToast component. See Storybook for full documentation.

Presence component. See Storybook for full documentation.

Sonner component. See Storybook for full documentation.

Toast component. See Storybook for full documentation.

InAppOverlay component. See Storybook for full documentation.