Components
A collection of 60 reusable components built with Radix UI and Tailwind CSS. Designed to be accessible, customizable, and easy to integrate into your projects.
Accordion
A vertically stacked set of interactive headings that reveal or hide content.
Alert
Displays a callout for user attention.
Heads up!
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Aspect Ratio
Displays content within a desired ratio.
Avatar
An image element with a fallback for representing the user.
Badge
Displays a small count or status indicator.
Button
Allows users to take actions with a single click or tap.
Calendar
A date field component that allows users to enter and edit date values.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
23 | 24 | 25 | 26 | 27 | 28 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
Card
Containers for displaying content and actions about a single subject.
Card Title
Card Description
Card Content
Checkbox
A control that allows the user to toggle between checked and unchecked states.
Collapsible
An interactive component that expands/collapses a panel.
Command
A command palette for quick keyboard-driven actions.
Context Menu
Displays a menu located at the pointer when right-clicking an element.
Dialog
A window overlaid on the primary window, rendering the content underneath inert.
Dropdown Menu
Displays a menu to the user triggered by a button.
Form
A collection of form components with validation.
Hover Card
For sighted users to preview content available behind a link.
Input
Allows users to enter text into a UI.
Label
Renders an accessible label associated with controls.
Menubar
A horizontal menu with clickable items.
Navigation Menu
A collection of links for site navigation.
Popover
Displays rich content in a portal, triggered by a button.
Progress
Displays an indicator showing the completion progress of a task.
Radio Group
A set of checkable buttons where only one can be checked at a time.
Scroll Area
Augments native scroll functionality for custom scrollbars.
Select
Displays a list of options for the user to pick from.
Separator
A visual divider between content.
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Slider
Allows users to make selections from a range of values.
Switch
A control that allows the user to toggle between checked and not checked.
Table
Displays data in rows and columns.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
Tabs
A set of layered sections of content that display one panel at a time.
Textarea
Allows users to enter multiple lines of text.
Toast
A succinct message that is displayed temporarily.
Toggle
A two-state button that can be either on or off.
Tooltip
A popup that displays information related to an element when the element receives focus or is hovered over.
Breadcrumb
Displays the hierarchical path to the current page or resource.
Carousel
A slideshow component for cycling through elements.
Combobox
A combination of a text input and a dropdown that allows users to filter a list of options.
Data Table
A table component with sorting, filtering, and pagination.
| ID | Name | Status | Actions |
|---|---|---|---|
| 001 | John Doe | Active | |
| 002 | Jane Smith | Inactive |
Date Picker
Allows users to select a date or date range.
Drawer
A panel that slides in from the edge of the screen.
Empty State
A placeholder for when there is no content to display.
No results found
Try adjusting your search or filter to find what you're looking for.
File Upload
Allows users to upload files.
Image
Displays an image with various options.
Inline Edit
Allows users to edit content inline.
Kbd
Displays keyboard input.
Link
A navigational element that takes users to another page.
Loading
Indicates that content is being loaded.
Pagination
Allows users to navigate between pages of content.
Rating
Allows users to rate something.
Resizable
Allows users to resize elements.
Skeleton
Used to show a placeholder while content is loading.
Spinner
Indicates that an operation is in progress.
Stepper
Displays progress through a sequence of steps.
Tag Input
Allows users to input multiple tags.
Timeline
Displays a sequence of events in chronological order.
Event 1
Description of event 1
Event 2
Description of event 2
Toolbar
A container for grouping a set of controls.
Tree View
Displays hierarchical data in a tree-like structure.
Video
Displays video content.
Wizard
Guides users through a multi-step process.
Step 1 content goes here.
Color Picker
Allows users to select a color.
Chip
Compact elements that represent an input, attribute, or action.
Divider
A horizontal or vertical line that separates content.
Drawer
A panel that slides in from the edge of the screen.
Dropdown
A button that when clicked, displays a menu.