57 components available. All based on shadcn/ui + Radix UI primitives unless noted as custom.
For component selection guidance, see Component Match.
Quick Reference
| Component | File | Variants | Theme-Aware | Category |
|---|---|---|---|---|
| Accordion | accordion.md | — | No | Disclosure |
| Alert | alert.md | default, destructive | Yes | Feedback |
| Alert Dialog | alert-dialog.md | — | No | Feedback |
| Aspect Ratio | aspect-ratio.md | — | No | Layout |
| Avatar | avatar.md | — | No | Data Display |
| Badge | badge.md | default, secondary, outline, destructive, ghost, link | Yes | Data Display |
| Breadcrumb | breadcrumb.md | — | No | Navigation |
| Button | button.md | default, secondary, destructive, outline, ghost, link | Yes | Action |
| Button Group | button-group.md | — | No | Action |
| Calendar | calendar.md | single, range, multiple | Yes | Data Display |
| Card | card.md | default, sm | Yes | Data Display |
| Carousel | carousel.md | horizontal, vertical | No | Data Display |
| Chart | chart.md | bar, area, line, pie, radar, radial | No | Data Display |
| Checkbox | checkbox.md | — | Yes | Form |
| Collapsible | collapsible.md | — | No | Disclosure |
| Combobox | combobox.md | — | No | Form |
| Command | command.md | — | No | Navigation |
| Context Menu | context-menu.md | default, checkbox, radio | No | Navigation |
| Data Table | data-table.md | — | No | Data Display |
| Date Picker | date-picker.md | icon-left, icon-right, with-input | No | Form |
| Dialog | dialog.md | — | No | Overlay |
| Drawer | drawer.md | — | No | Overlay |
| Dropdown Menu | dropdown-menu.md | default, checkbox, radio, icon | No | Navigation |
| Empty | empty.md | — | No | Feedback |
| Field | field.md | vertical, horizontal, responsive | No | Form |
| Form | form.md | — | No | Form |
| Header | header.md | desktop, mobile | No | Layout |
| Hover Card | hover-card.md | — | No | Data Display |
| Input | input.md | default, file, with-icon | No | Form |
| Input Group | input-group.md | — | No | Form |
| Input OTP | input-otp.md | digits-only, with-separator, simple, with-spacing | No | Form |
| Item | item.md | default, outline | No | Data Display |
| Kbd | kbd.md | — | No | Data Display |
| Label | label.md | — | No | Form |
| Menubar | menubar.md | default, checkbox, radio | No | Navigation |
| Navigation Menu | navigation-menu.md | — | No | Navigation |
| Pagination | pagination.md | previous, next, link, ellipsis | Yes | Navigation |
| Popover | popover.md | — | No | Overlay |
| Progress | progress.md | — | Yes | Feedback |
| Radio Group | radio-group.md | default, box | Yes | Form |
| Resizable | resizable.md | horizontal, vertical | No | Layout |
| Scroll Area | scroll-area.md | — | No | Layout |
| Select | select.md | — | No | Form |
| Separator | separator.md | horizontal, vertical | No | Layout |
| Sheet | sheet.md | top, right, bottom, left | No | Overlay |
| Sidebar | sidebar.md | sidebar, floating, inset | Yes | Navigation |
| Skeleton | skeleton.md | — | No | Feedback |
| Slider | slider.md | single, range | Yes | Form |
| Sonner | sonner.md | default, success, info, warning, error, loading | Yes | Feedback |
| Spinner | spinner.md | — | No | Feedback |
| Switch | switch.md | default, box | Yes | Form |
| Table | table.md | — | No | Data Display |
| Tabs | tabs.md | — | No | Navigation |
| Textarea | textarea.md | — | No | Form |
| Toggle | toggle.md | default, outline | No | Disclosure |
| Toggle Group | toggle-group.md | default, outline | No | Disclosure |
| Tooltip | tooltip.md | — | Yes | Overlay |
By Category
Action
- Button — Primary interactive element with 6 variants (default, secondary, destructive, outline, ghost, link) and 8 sizes
- Button Group — Container for grouping related buttons with collapsed borders, split button patterns
Data Display
- Avatar — User profile image with fallback initials, 5 sizes and 2 shapes
- Badge — Inline status label with 6 variants (default, secondary, outline, destructive, ghost, link)
- Calendar — Date selection grid supporting single, range, and multi-date modes
- Card — Flexible content container with header, action, content, and footer sections; default and sm sizes
- Carousel — Scrollable content slider powered by Embla, horizontal or vertical
- Chart — Data visualization wrapper for Recharts with 6 chart types and themed color tokens
- Data Table — Interactive table with sorting, filtering, selection, and pagination via TanStack Table
- Hover Card — Rich content preview displayed on hover with configurable delay
- Item — Flexible list item / card display with media, content, and action slots; default and outline variants
- Kbd — Keyboard key display for shortcuts, used in tooltips, menus, and command palettes
- Table — Static data table with header, body, footer, and caption
Feedback
- Alert — Inline notice with icon, title, and description in default or destructive variants
- Alert Dialog — Modal confirmation dialog that blocks interaction until resolved
- Empty — Empty state placeholder with icon, title, description, and action slots for no-data scenarios
- Progress — Horizontal bar showing completion percentage with animated indicator
- Skeleton — Pulsing placeholder shapes for loading states (line, circle, square)
- Sonner — Toast notification system with 6 types including success, error, and loading
- Spinner — Animated loading indicator (16px), used standalone or inside buttons
Form
- Checkbox — Binary toggle with label support, 16px square with check icon
- Combobox — Searchable dropdown combining Command + Popover, supports multi-select
- Date Picker — Calendar-based date input with 3 layout types (icon-left, icon-right, with-input)
- Field — Unified form field component with label, description, error, and orientation support (vertical, horizontal, responsive)
- Form — React Hook Form + Zod integration wrapper with validation and error handling
- Input — Standard text input field with label, description, icon, and error states
- Input Group — Input with inline icons, buttons, text addons, and loading states
- Input OTP — One-time password entry with 4 layout variants for verification codes
- Label — Form field label with semibold styling and disabled state support
- Radio Group — Single-select option group with default and box-style variants
- Select — Native-style dropdown for choosing from a list of options
- Slider — Draggable range control for single or dual-thumb value selection
- Switch — On/off toggle with track and thumb, default and box-style types
- Textarea — Multi-line text input with resizing, character count, and error states
Layout
- Aspect Ratio — Maintains consistent width-to-height ratio for images and media
- Header — Custom app header with responsive desktop/mobile layouts and navigation (not a shadcn primitive)
- Resizable — Drag-to-resize panel groups with horizontal or vertical orientation
- Scroll Area — Custom-styled scrollbar container for overflow content
- Separator — Visual divider line in horizontal or vertical orientation
Navigation
- Breadcrumb — Hierarchical page trail with links, ellipsis, and dropdown support
- Command — Searchable command palette (⌘K pattern) with grouped items and shortcuts
- Context Menu — Right-click menu with items, checkboxes, radio groups, and submenus
- Dropdown Menu — Click-triggered menu with items, checkboxes, radio groups, and submenus
- Menubar — Horizontal menu bar with multiple dropdown menus (File, Edit, View pattern)
- Navigation Menu — Top-level site navigation with dropdown content panels
- Pagination — Page navigation controls with previous/next buttons and page numbers
- Sidebar — Collapsible side navigation with menu items, sub-menus, and badges
- Tabs — Tabbed content switcher with pill-style tab list and content panels
Overlay
- Dialog — Modal window for forms or content, centered with backdrop overlay
- Drawer — Bottom sheet overlay that slides up, swipe-to-close, mobile-friendly
- Popover — Floating content panel anchored to a trigger element
- Sheet — Side panel overlay from any edge (top, right, bottom, left)
- Tooltip — Small informational popup on hover with arrow indicator
Disclosure
- Accordion — Expandable content sections with single or multiple open items
- Collapsible — Simple show/hide toggle for content blocks
- Toggle — Pressable button with on/off state in default or outline variants
- Toggle Group — Grouped toggle buttons for single or multiple selection
Last updated: February 19, 2026