Accordions
Single open
Multiple open
Address Autocomplete
Default
Badges
DefaultOrangeBlueGreenTealRustPurpleMagentaDanger
Badge Groups
Default
Orange Two
Blue (10-15)
Green
Teal Loooong
Rust
Purple
Magenta
Calendar
Default
Selected Date: None
Range with 2 months
Selected Dates: None - None
Week Numbers
Selected Date: None
Cards
Base card (no additional styles)
Sample Card Title
This is a description of the card. It gives a brief overview of the content within the card.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Carousel
Horizontal (with loop)
1
2
3
4
5
Vertical (free)
1
2
3
4
5
Checkbox Variants
Default
Outline
Unchecked
Checked
Disabled
Disabled Checked
Combobox
Consists of the popover and command components
Default
No max height
Disabled
Command (used in phone input) within a popover
Date Picker
Default
Limit start and end date
2 months
Dialog
Dropzone Variants
Can configure accepted file types, max file count, max file size and much more
Single File (Images only)
Max 1 file, PNG/JPG/JPEG only, 5MB limit
Drop files here to upload
Single File:
[]
Multiple Files
Max 5 files, any type, 10MB per file
Drop files here to upload
Multiple Files:
[]
Dropzone with Cropper
Max 1 file, PNG/JPG/JPEG only, 5MB limit
Drop files here to upload
Dropzone with Cropper:
[]
Filter Sidebar
Current columnFilters
[]
Filtered results
[]
Form
Input OTP
Input
Default
Disabled
Lightbox
Default
Location Picker
null
Map
Default map (with controls)
Map with marker & popup
Cluster layer
Multi Select
Consists of the popover and command components
Default
Select All Enabled
Disabled
Phone input
Default
International
With default country
Disabled
Popover
Radio Group
Rich Text Editor
Default
With Initial Content
Disabled
With Label
Select text to see the formatting toolbar.
Scroll Area
Vertical
Horizontal
Select
Default
Scrollable
Disabled
Sheet
Sliders
Single
33
Range
25 - 75
Disabled
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Tabs
Make changes to your account here.
Textarea
Default
Disabled
With text & label
Your message will be copied to the support team.
Time Picker
Timezone Selector Variants
Selected Timezone: