Accordion
A stacked set of collapsible panels.
Alert
A callout to draw user's attention.
Avatar
An img element with fallback
AvatarGroup
Stack multiple avatars in a group.
Badge
An indicator of a numeric value or a state.
Breadcrumb
A hierarchy of links to navigate through a website.
Button
A button element that can act as a link or trigger an action.
ButtonGroup
Group multiple button-like elements together.
With Button
With Chip
With Input
With Tooltip
With Select
Calendar
A calendar component for selecting single dates, multiple dates or date ranges.
Single
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Multiple
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Range
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Disable Days
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Unavailable Days
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Card
Display content in a card with a header, body and footer.
Title
Description
Carousel
A carousel with motion and swipe built using Embla.
Checkbox
An input element to toggle between checked and unchecked states.
Description
#description
Chip
A short text to represent a status or a category.
Collapsible
A collapsible element to toggle visibility of its content.
Drawer
A drawer that smoothly slides in & out of the screen.
DropdownMenu
A menu to display actions when clicking on an element.
Form
A form component with built-in validation and submission handling.
FormItem
A wrapper for form elements that provides validation and error handling.
Description
Error Message
Input
An input element to enter text.
InputNumber
Input numerical values with a customizable range.
Kbd
A kbd element to display a keyboard key.
Modal
A dialog window that can be used to display a message or request user input.
Pagination
A list of buttons or links to navigate through pages.
PinInput
An input element to enter a pin.
Popover
A non-modal dialog that floats around a trigger element.
Progress
An indicator showing the progress of a task.
RadioGroup
A set of radio buttons to select a single option from a list.
ScrollArea
Augments native scroll functionality for custom, cross-browser styling.
Select
A select element to choose from a list of options.
Separator
Separates content horizontally or vertically.
Skeleton
A placeholder to show while content is loading.
Slider
An input to select a numeric value within a range.
Switch
A control that toggles between two states.
Description
Description
#description
Table
A responsive table element to display data in rows and columns.
| ID | Date | Status | ||
|---|---|---|---|---|
| 4600 | 2024-03-11T15:30:00 | james.anderson@example.com | paid | |
| 4599 | 2024-03-11T10:10:00 | mia.white@example.com | failed | |
| 4598 | 2024-03-11T08:50:00 | william.brown@example.com | refunded | |
| 4597 | 2024-03-10T19:45:00 | emma.davis@example.com | paid | |
| 4596 | 2024-03-10T15:55:00 | ethan.harris@example.com | paid |
Tabs
A set of tab panels that are displayed one at a time.
Textarea
A textarea element to input multi-line text.
Toast
A succinct message to provide information or feedback to the user.
Tooltip
A popup that reveals information when hovering over an element.
Native Elements
...