Examples
Components
The catalog below mirrors the available UI components and routes each example from a single registry.
Button
Button variants, sizes, icons, and loading states.
/components/button
Button Group
Grouped controls with shared edges and separators.
/components/button-group
Unstyled Button
Behavior-only button primitives for custom presentation.
/components/unstyled-button
Checkbox
Boolean selection inputs and checkbox groups.
/components/checkbox
Input
Text, email, search, and disabled input states.
/components/input
Input Group
Inputs with addons, buttons, and stacked affordances.
/components/input-group
Input OTP
Segmented verification code entry flows.
/components/input-otp
Textarea
Multi-line text input with sizing examples.
/components/textarea
Label
Accessible form labels and required indicators.
/components/label
Field
Composable field layouts with errors and descriptions.
/components/field
Slider
Continuous or ranged numeric input via drag handles.
/components/slider
Switch
Binary toggle controls for settings and preferences.
/components/switch
Radio Group
Single-choice selection sets.
/components/radio-group
Select
Radix-powered select menus with labels and groups.
/components/select
Native Select
Styled native select elements and optgroups.
/components/native-select
Combobox
Typeahead selection with filtering and chips.
/components/combobox
Multi Select
Chip-based multiple selection with typeahead filtering.
/components/multi-select
Tag Picker
Suggestion-aware tags that can also create new entries inline.
/components/tag-picker
File Input
Hidden file input wired to a themed button trigger.
/components/file-input
Calendar
Single-date, range, and week-number date views.
/components/calendar
Card
Structured content containers with actions and footers.
/components/card
Separator
Horizontal and vertical dividers for layout rhythm.
/components/separator
Resizable
Resizable panels for split-view layouts.
/components/resizable
Aspect Ratio
Media containers that preserve a consistent frame.
/components/aspect-ratio
Sidebar
Composable sidebar primitives for application shells.
/components/sidebar
Scroll Area
Custom scroll containers with themed scrollbars.
/components/scroll-area
Scroll Shadow
CSS-mask fade shadows at the edges of any scroll container.
/components/scroll-shadow
Alert
Inline status and messaging patterns with actions.
/components/alert
Basic Alert
Opinionated alert presets with built-in icons.
/components/basic-alert
Progress
Linear progress indicators for loading and completion.
/components/progress
Skeleton
Loading placeholders for content blocks and lists.
/components/skeleton
Spinner
Spinning loaders with optional labels.
/components/spinner
Sonner
Toast notifications using the shared toaster setup.
/components/sonner
Empty
Empty states with messaging and next actions.
/components/empty
Collapsible
Progressive disclosure for secondary content.
/components/collapsible
Accordion
Expandable content groups and disclosure patterns.
/components/accordion
Tooltip
Short hints and shortcuts on hover or focus.
/components/tooltip
Hover Card
Hover-driven supplemental content panels.
/components/hover-card
Copy Button
Inline copy-to-clipboard affordances with feedback.
/components/copy-button
Kbd
Keyboard key labels for shortcuts and hints.
/components/kbd
Tabs
Tabbed content organization and switching.
/components/tabs
Breadcrumb
Hierarchical navigation with separators and overflow.
/components/breadcrumb
Navigation Menu
Top-level navigation with rich content panels.
/components/navigation-menu
Pagination
Page navigation with active, previous, and next states.
/components/pagination
Dialog
Modal content surfaces with titles and actions.
/components/dialog
Alert Dialog
Confirmation dialogs for destructive or blocking actions.
/components/alert-dialog
Sheet
Off-canvas panels for supporting workflows.
/components/sheet
Drawer
Edge-mounted drawers for mobile-first flows.
/components/drawer
Popover
Anchored floating panels for supporting content.
/components/popover
Dropdown Menu
Button-triggered menus with groups and submenus.
/components/dropdown-menu
Context Menu
Right-click and long-press action menus.
/components/context-menu
Menubar
Desktop-style application menus and nested actions.
/components/menubar
Command
Command palette surfaces and searchable lists.
/components/command
Carousel
Horizontal content carousels with navigation controls.
/components/carousel
Avatar
Single avatars, badges, and grouped participants.
/components/avatar
Badge
Compact status labels and metadata chips.
/components/badge
Table
Responsive tables with headers, rows, and totals.
/components/table
Item
Flexible list rows with media, content, and actions.
/components/item
Toggle
Single pressed-state controls with icon support.
/components/toggle
Toggle Group
Grouped pressed-state controls for formatting and views.
/components/toggle-group
Direction
LTR and RTL rendering for directional primitives.
/components/direction