Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
Components
A collection of components for your project.
Accordion
A collapsible for displaying content.
Action Bar
Display an action bar for selected items.
Alert Dialog
Dialog for displaying important content.
Alert
Displays an alert for user attention.
Announcement
Inline notice for short, prominent updates.
Aspect Ratio
Wrapper that maintains aspect ratio for content.
16:9
Autocomplete
Displays a searchable list of options.
Avatar
Displays a user's profile image with fallback.
Badge
A badge or an element styled as a badge.
Bottom Navigation
Fixed bottom nav for mobile-first apps.
Breadcrumb
Shows user location within a hierarchy.
Button Group
Group button elements together.
Button
A button or an element styled as a button.
Calendar
Select a date or a range of dates.
Card
Displays content about a single subject.
Carousel
Lets users cycle through a series of items.
Chart
Visualize data with beautiful charts.
Checkbox
Control for multiple selections in a set.
Circular Progress
Shows task progress with a circular indicator.
Circular Slider
Circular slider for selecting values.
Clipboard
Copy text to the clipboard.
Collapsible
Collapsible content in a vertical stack.
Color Picker
Pick colors with hue and alpha controls.
Combobox
Displays a searchable list of options.
Command
Searchable command input with filtering.
Context Menu
A menu shown on right-click.
Data List
A list of label-value pairs.
Date Picker
Input with a built-in calendar.
Dialog
A dialog for displaying content.
Drawer
A sliding panel with swipe support.
Editable
Allows user to edit text in-place.
Field
Container for inputs, labels, and helper text.
File Upload
A component that allows users to upload files.
Float
Anchor an element to the edge of a container.
Floating Panel
Displays content in a floating window.
Frame
Bordered box for grouping related content.
Hint
Minimal tooltip for showing information.
Hover Card
Popover that appears on hover.
Image Cropper
Crop and transform images.
Input Group
Group input elements together.
Input OTP
Accessible one-time password input.
Input
A field that allows users to enter text.
Item
A versatile component for displaying content.
Kbd
Styled representation of a single key.
⌘
K
Link Overlay
Makes the whole card or article clickable.
Listbox
Select a single or multiple items from a list.
Marquee
Scrolls items in a horizontal container.
Menu
List of options on button interaction.
Native Select
Styled native HTML select element.
Number Input
Numeric input for entering values.
Pagination
Navigate through a list of items.
Popover
Overlay with extra info or options on trigger.
Progress
Displays task progress with a linear indicator.
Prose
Typography styles for HTML content.
QR Code
Displays a QR code.
Radio Group
Allows single selection from multiple options.
Rating
Show reviews and ratings in a visual format.
Resizable
Divides the interface into resizable sections.
A
B
Scroll Area
Custom scrollable area with styled scrollbars.
Segment Group
Follows the selected item.
Select
Displays a list of options.
Separator
Visually separate content with a line.
Sheet
Content that slides in from the screen edge.
Sidebar
A sidebar for navigation and app structure.
Signature Pad
Capture hand-drawn signatures.
Skeleton
Displays a loading state.
Skip Nav
Lets keyboard users skip to main content.
Slider
A slider for selecting a value from a range.
Spinner
A spinner for displaying a loading state.
Status
Color-coded status for process or state.
Steps
Steps in a wizard-like format.
Switch
A switch for toggling a binary state.
Table
A responsive table component.
Tabs
A tabs for navigating between content.
Textarea
Form textarea or textarea-styled component.
Timer
Countdown or stopwatch with controls.
Toast
Provides feedback on an action.
Toggle Group
Toggle buttons for selecting a value.
Toggle Tooltip
Display information on click.
Toggle
Two-state button that can be toggled on or off.
Tooltip
Display information on hover or focus.
Tour
Displays a guided tour of the application.
Tree View
Hierarchical data in a tree structure.