Components
Browse and use our collection of reusable components.
Button
Displays a button or a component that looks like a button.
Input
Displays a form input field.
Textarea
Displays a multi-line text input field.
Label
Renders an accessible label associated with controls.
Select
Displays a list of options for the user to pick from.
Checkbox
A control that allows the user to toggle between checked and not checked.
Radio Group
A set of checkable buttons where only one can be checked at a time.
Switch
A control that allows the user to toggle between on and off.
Slider
An input where the user selects a value from within a given range.
Toggle
A two-state button that can be on or off.
Toggle Group
A set of toggle buttons that can work together.
Calendar
A date field component that allows users to select dates.
Date Picker
A date picker built with Calendar and Popover.
Avatar
An image element with a fallback for user profiles.
Badge
Displays a badge or a component that looks like a badge.
Card
Displays a card with header, content, and footer.
Chart
Beautiful charts built with Recharts. Area, bar, line, pie, radar, and radial.
| Name | Status |
|---|---|
| Item 1 | Active |
| Item 2 | Pending |
Table
A responsive table component.
Skeleton
Used to show a placeholder while content is loading.
Separator
Visually separates content.
Hover Card
For sighted users to preview content behind a link.
Alert Title
Alert
Displays a callout for user attention.
Dialog
A modal dialog that interrupts the user.
Popover
Displays rich content in a portal triggered by a button.
Toast
A succinct message that is displayed temporarily.
Tooltip
A popup that displays information related to an element.
Progress
Displays an indicator showing the completion progress of a task.
Command
Fast, composable command menu for search and actions.
Dropdown Menu
Displays a menu to the user.
Tabs
A set of layered sections of content.
Accordion
A vertically stacked set of interactive headings.
Collapsible
An interactive component which expands and collapses.
Sheet
A panel that slides out from the side of the screen.
Scroll Area
Augments native scroll functionality for custom styling.
AI Chat
Conversational AI interface for exploring the design system.