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