Command Menu
Render a Command Palette that opens when CMD + K is pressed.
Accordion
Component
A collapsible component for displaying content in a vertical stack.
Avatar
Component
A graphical representation of the user, often used in profile sections.
Carousel
Component
A slideshow component that cycles through elements.
Checkbox
Component
A control element that allows for multiple selections within a set.
Clipboard
Component
A component to copy text to the clipboard
Collapsible
Component
An interactive component that can be expanded or collapsed.
Color Picker
Component
A component that allows users to select a color from a color picker.
Combobox
Component
A single input field that combines the functionality of a select and input.
Date Picker
Component
A component that allows users to select a date from a calendar.
Dialog
Component
A modal window that appears on top of the main content.
Editable
Component
A component that allows users to edit text in place.
Field
Component
Provides a flexible container for form inputs, labels, and helper text.
File Upload
Component
A component that is used to upload multiple files.
Hover Card
Component
A card that appears when a user hovers over an element.
Number Input
Component
A field that allows user input of numeric values.
Pagination
Component
A navigation component that allows users to browse through pages.
Pin Input
Component
For pin or verification codes with auto-focus transfer and masking options.
Popover
Component
An overlay that displays additional information or options when triggered.
Presence
Component
Helps control the rendering and unmounting of your content based on a given state.
Progress - Circular
Component
An element that shows either determinate or indeterminate progress.
Progress - Linear
Component
An element that shows either determinate or indeterminate progress.
QR Code
Component
A component that generates a QR code based on the provided data.
Radio Group
Component
Allows single selection from multiple options.
Rating Group
Component
Allows users to rate items using a set of icons.
Segment Group
Component
Organizes and navigates between sections in a view.
Select
Component
Displays a list of options for the user to pick from.
Signature Pad
Component
A component that allows users to draw a signature using a signature pad.
Slider
Component
A control element that allows for a range of selections.
Splitter
Component
A component that divides your interface into resizable sections
Switch
Component
A control element that allows for a binary selection.
Tabs
Component
Flexible navigation tool with various modes and features.
Toast
Component
A message that appears on the screen to provide feedback on an action.
Toggle Group
Component
A set of two-state buttons that can be toggled on or off.
Tooltip
Component
A label that provides information on hover or focus.
Tree View
Component
A component that is used to show a tree hierarchy.
Checkbox Group
Example
Render a Checkbox Group with multiple options.
Popover Selection
Example
Render a Popover after selecting some text.
Popover with Tooltip
Example
Render a Popover with a Tooltip that shows upon hovering over the Popover Trigger.
Async Select
Example
Render a Select that fetches items asynchronously.
Select Tabs
Example
Render a Tabs component within a Select.
Slider with Number Input
Example
Render a Slider with a Tooltip that shows the current value of the Slider.
Slider with Tooltip
Example
Render a Slider with a Tooltip that shows the current value of the Slider.
Tabs with links
Example
Render a Tabs component with links as the Tab Trigger.
Tooltip with following cursor
Example
Render a Tooltip that follows the cursor when hovering over the target element.
Accordion
Component
A collapsible component for displaying content in a vertical stack.
Avatar
Component
A graphical representation of the user, often used in profile sections.
Carousel
Component
A slideshow component that cycles through elements.
Checkbox
Component
A control element that allows for multiple selections within a set.
Clipboard
Component
A component to copy text to the clipboard
Collapsible
Component
An interactive component that can be expanded or collapsed.
Color Picker
Component
A component that allows users to select a color from a color picker.
Combobox
Component
A single input field that combines the functionality of a select and input.
Date Picker
Component
A component that allows users to select a date from a calendar.
Dialog
Component
A modal window that appears on top of the main content.
Editable
Component
A component that allows users to edit text in place.
Field
Component
Provides a flexible container for form inputs, labels, and helper text.
File Upload
Component
A component that is used to upload multiple files.
Hover Card
Component
A card that appears when a user hovers over an element.
Number Input
Component
A field that allows user input of numeric values.
Pagination
Component
A navigation component that allows users to browse through pages.
Pin Input
Component
For pin or verification codes with auto-focus transfer and masking options.
Popover
Component
An overlay that displays additional information or options when triggered.
Presence
Component
Helps control the rendering and unmounting of your content based on a given state.
Progress - Circular
Component
An element that shows either determinate or indeterminate progress.
Progress - Linear
Component
An element that shows either determinate or indeterminate progress.
QR Code
Component
A component that generates a QR code based on the provided data.
Radio Group
Component
Allows single selection from multiple options.
Rating Group
Component
Allows users to rate items using a set of icons.
Segment Group
Component
Organizes and navigates between sections in a view.
Select
Component
Displays a list of options for the user to pick from.
Signature Pad
Component
A component that allows users to draw a signature using a signature pad.
Slider
Component
A control element that allows for a range of selections.
Splitter
Component
A component that divides your interface into resizable sections
Switch
Component
A control element that allows for a binary selection.
Tabs
Component
Flexible navigation tool with various modes and features.
Toast
Component
A message that appears on the screen to provide feedback on an action.
Toggle Group
Component
A set of two-state buttons that can be toggled on or off.
Tooltip
Component
A label that provides information on hover or focus.
Tree View
Component
A component that is used to show a tree hierarchy.
Checkbox Group
Example
Render a Checkbox Group with multiple options.
Popover Selection
Example
Render a Popover after selecting some text.
Popover with Tooltip
Example
Render a Popover with a Tooltip that shows upon hovering over the Popover Trigger.
Async Select
Example
Render a Select that fetches items asynchronously.
Select Tabs
Example
Render a Tabs component within a Select.
Slider with Number Input
Example
Render a Slider with a Tooltip that shows the current value of the Slider.
Slider with Tooltip
Example
Render a Slider with a Tooltip that shows the current value of the Slider.
Tabs with links
Example
Render a Tabs component with links as the Tab Trigger.
Tooltip with following cursor
Example
Render a Tooltip that follows the cursor when hovering over the target element.
Render a Command Palette that opens when CMD + K is pressed.