Components
Every one of the 58 components below is a live, interactive instance, not a mockup. Each card previews the real component and you can interact with it here. Search or filter by category, then use the View action to open the full page for usage code, sizes, states, and accessibility notes.
58 of 58 components
Foundation & Layout
Button
Action control with contained, bordered, dashed, ghost, semantic, size, and loading states.
Icon Button
Square icon-only control with sizes, semantic tones, and accessible labels.
Button Group
Single-select control group with shared focus, hover, active, and disabled states.
Title
Body small
Typography
Type scale with semantic display, heading, title, body, and caption variants.
Link
Accessible anchor styling with color, hover, and underline options.
Divider
Horizontal or vertical separator for grouping related content.
Layout
Composable Box, Container, Stack, Grid, and AspectRatio layout primitives.
Scroll Area
Themed scroll container with controlled overflow and lightweight scrollbars.
Collapsible
Expandable panel and accordion primitives with controlled and keyboard-accessible states.
Icons
Lucide icon primitive with tones, sizes, and containers.
Forms
Form Field
Form label, description, required, invalid, and error-message wiring for controls.
Input
Text field, Textarea, Password, Search, Number, and OTP.
Checkbox
Checkbox control with checked, unchecked, indeterminate, disabled, and labeled states.
Radio
Single-choice radio group with labels, descriptions, disabled items, and validation states.
Switch
Compact on/off control for toggling a setting or feature.
Select
Native select, custom select, and multi-select with chips.
Combobox
Searchable single-select field with keyboard navigation and filtering.
Slider
Single-value range control with keyboard support and configurable bounds.
Rating
Interactive star rating input with sizes, values, and read-only states.
Calendar
Interactive month calendar for selecting dates and navigating months.
Date Picker
Date field paired with a popover calendar for selecting one date.
Time Picker
Accessible hour-and-minute selector with keyboard-friendly controls.
File Upload
Button-triggered file upload and drag-and-drop Dropzone with validation states.
Navigation
Navbar
Responsive top navigation bar with logo, links, and actions.
Sidebar
Vertical navigation panel for grouped links, active states, and disabled items.
Tree
Recursive expandable tree with roving-tabindex keyboard navigation, for file browsers and nested navigation.
Bottom Navigation
Responsive mobile navigation bar with icons, labels, and active state.
Breadcrumb
Hierarchical page navigation with current-page and collapsed-path states.
Tabs
Tabbed navigation and segmented controls with panels, active states, and responsive layouts.
Pagination
Page navigation with compact, full, disabled, and responsive variants.
Data Display
Plan
Pro tier
Card
Composable content surface with title, description, content, and footer slots.
Badge
Compact semantic status, count, or category label with soft visual treatment.
Avatar
Avatar images, initials, status indicators, and grouped overflow presentations.
- Row one
- Row two
List
Composable rows with leading content, metadata, dividers, selection, and states.
- Plan
- Pro
- Seats
- 5
Description List
Key-value content layout with horizontal, vertical, bordered, and responsive modes.
Table
Responsive tables and sortable DataTable layouts with pagination and selection patterns.
Weekly signups
| Signups, Day 1 | 40 |
|---|---|
| Signups, Day 2 | 58 |
| Signups, Day 3 | 48 |
| Signups, Day 4 | 76 |
| Signups, Day 5 | 64 |
Chart
Responsive line, bar, and donut charts with tooltips, legends, axes, and animation.
Revenue
$0
8.2%
Statistic
Animated statistic value with labels, prefixes, suffixes, and positive or negative change.
Order placed
9:02amShipped
2:14pm
Timeline
Event history layout with status dots, timestamps, descriptions, and left/right/alternating alignment.
No results
Try a different search.
Empty State
Clear no-results state with message, optional illustration, and recovery action.
Image
Responsive image with loading and error states plus an accessible fullscreen preview.
Carousel
Autoplay slides with arrows, dots, and multi-slide layouts.
Chat Bubble
Incoming/outgoing message bubbles with avatar, sender, timestamp, delivery status, and grouped runs.
Feedback
Heads up
Alert
Inline feedback banner for information, success, warning, and error messages.
Toast
Temporary feedback notification with semantic variants and dismiss behavior.
New comment
Kenji replied to your PR.
2m ago
Notification
Notification row with avatar or icon, metadata, unread state, and actions.
Progress
Linear and circular progress indicators with determinate and loading states.