Components
A collection of components for your project.
Accordion
Open one panel or many. For FAQs, settings, and other disclosure UI.
Action Bar
Display an action bar for selected items.
Alert
Displays an alert for user attention.
Alert Dialog
A modal for critical confirmations and destructive actions.
Anatomy
Labeled part diagrams for component docs.
Angle Slider
A control for selecting an angle in a circular range.
Announcement
Inline notice for short, prominent updates.
Aspect Ratio
Wrapper that maintains aspect ratio for content.
Autocomplete
A searchable input that suggests options while allowing custom values.
Avatar
Displays a user's profile image with fallback.
Badge
A compact label for status, counts, and categories.
Bottom Navigation
Fixed bottom nav for mobile-first apps.
Breadcrumb
Shows the current page in a hierarchy.
Button
Triggers an action or navigates when used as a link.
Button Group
Visually connected buttons and related controls.
Calendar
Select a date, dates, or a range from an inline calendar.
Card
A surface for a single subject: header, media, body, and footer.
Carousel
An interactive slideshow for cycling through 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
A progress-ring dial for selecting an angle.
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 Input
Segmented input for dates and times.
Date Picker
Input with a built-in calendar.
Dialog
A modal window that appears on top of the main 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.
Image Zoom
Click to zoom images, SVG, and diagrams.
Input
A field that allows users to enter text.
Input Group
Group input elements together.
Input OTP
Accessible one-time password input.
Item
A versatile component for displaying content.
Kbd
Styled representation of a single key.
Keyboard Table
Key / Description rows with keycap shortcuts.
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.
Password Input
A field for entering secure text.
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.
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.
Table of Contents
Highlights the heading in view on docs and long pages.
Tabs
Mutually exclusive panels in one region.
Tags Input
Allows users to add tags to an input field.
Textarea
Form textarea or textarea-styled component.
Timer
Countdown or stopwatch with controls.
Toast
Provides feedback on an action.
Toggle
Two-state button that can be toggled on or off.
Toggle Group
Toggle buttons for selecting a value.
Toggle Tooltip
Display information on click.
Tooltip
Display information on hover or focus.
Tour
Displays a guided tour of the application.
Tree View
Hierarchical data in a tree structure.
Type Table
Expandable Prop / Type rows for component APIs.