Button
A button component with variants, sizes, icons, and states.
Badge
A badge component with different variants for various states and contexts.
Default
Secondary
Destructive
Outline
Success
Warning
Info
Ghost
Muted
Completed
In Progress
New Feature
Archived
Deleted
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Default Plus/Minus Animation
Custom Single Icon
Custom Open/Closed Icons
Multiple Items Example
Avatar
An image element with a fallback for representing the user.
Default Avatar
CN
Sizes
CNCNCNCN
Fallbacks
JDAB🦊User Avatar👾
Loading State
...
Breadcrumb
Displays the current page location within a hierarchical structure.
Default
Custom Separator
Collapsed
Styled
Skeleton
Use to show a placeholder while content is loading.
Basic
Card with Avatar
Table
Content Layout
Form
Toast
Beautiful, accessible toasts for your app.
Basic
Rich Colors
With Description
Interactive
Async
Custom Styling
Positions
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Basic
Positions
With Icons
Rich Content
AutoComplete
A component that allows the user to select an option from a list of options with a search input.
MultiSelect
A component that allows users to select multiple options from a searchable dropdown list.
Next.js
SvelteKit
TagInput
A component that allows users to input multiple tags with keyboard navigation and paste support.
react
typescript
Date & Time
Calendar, Time Picker, and Date Picker Input components for selecting dates and times.
Calendar
Single Selection
SU
MO
TU
WE
TH
FR
SA
Range Selection
SU
MO
TU
WE
TH
FR
SA
Time Picker
24-Hour Format
12-Hour Format
Date Picker Input
Date Only
Time Only
Date & Time
Screen Size
A screen size indicator component that shows current viewport dimensions and breakpoint.
0 x 0XSSMMDLGXL2XL