Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- 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
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
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
A compound badge designed to display announcements.
Aspect Ratio
Wrapper that maintains aspect ratio for content.
16:9
Autocomplete
Displays a searchable list of options to choose from.
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 a card with header, content, and footer.
Carousel
Interactive slideshow for cycling through content.
Chart
Visualize data with beautiful charts.
Checkbox
Control for multiple selections in a set.
Circular Progress
Displays the status of a task in a circular indicator.
Circular Slider
Circular slider for selecting values.
Clipboard
A component to copy text to the clipboard.
Collapsible
Collapsible content in a vertical stack.
⌃
Color Picker
Pick colors with hue and alpha controls.
Combobox
Searchable select for filtering and choosing options.
Command
Searchable command input with filtering.
Context Menu
A menu that appears when a user right-clicks on an element
Data List
A list of similar data items with labels and values.
Date Picker
A popover date picker with an input and calendar.
Dialog
A dialog for displaying content.
Drawer
A panel that slides in from the edge of the screen.
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
Used to display content in a non-modal floating window
Frame
A framed container for grouping related information.
Hint
A lightweight, minimal tooltip that shows information.
Hover Card
A card that appears when a user hovers over an element.
Image Cropper
Crop images with zoom, rotation, and aspect ratio.
Input Group
Group input elements together.
Input OTP
Accessible one-time password input component
Input
A field that allows users to enter text
Item
A versatile component for displaying any content.
Kbd
A keyboard shortcut component
⌘
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
A number input component for entering numeric values
Pagination
Navigate through a list of items.
Popover
Overlay with extra info or options on trigger.
Progress
Displays the status of a task that takes a long time.
Prose
Used to style remote HTML content.
QR Code
Displays a QR code.
Radio Group
Allows single selection from multiple options.
Rating
Used to show reviews and ratings in a visual format.
Resizable
Divides the interface into resizable sections.
A
B
Scroll Area
A custom scrollable area component with styled scrollbars
Segment Group
Follows the selected item.
Select
Displays a list of options to choose from.
⌃
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
Looks like a tooltip, but works like a popover.
Toggle
A 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.
⌃
⌃
⌃