Button · variants
ui/buttonComponent library
Every interface component the starter ships with, in its variants, sizes and states. All of them follow the theme you choose.
Form controls
Input
ui/input · labelWe'll only use it to send receipts.
Input group
ui/input-groupField with validation
ui/fieldWe'll only use it to send receipts.
Textarea
ui/textareaSelect
ui/select · native-selectCheckbox, radio & switch
ui/checkbox · radio-group · switchSlider
ui/sliderVolume60%
Input OTP
ui/input-otpCalendar
ui/calendar| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 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 |
Overlays
Dialog & alert dialog
ui/dialog · alert-dialogSheet & drawer
ui/sheet · drawerPopover, hover card & tooltip
ui/popover · hover-card · tooltipDropdown & context menu
ui/dropdown-menu · context-menuRight-click here
Command palette
ui/commandSuggestions
Calendar
Profile
Billing
Settings
Settings⌘S
Feedback
Alert
ui/alertHeads up
You can add components to your app with a single import.
Something went wrong
We couldn't save your changes. Try again.
Toast
ui/sonnerBadge
ui/badgePrimary Secondary Outline Destructive Paid
Progress & spinner
ui/progress · spinnerUpload progress36%
Skeleton
ui/skeletonEmpty state
ui/emptyNo projects yet
Create your first project to see it here.
Data
Card
ui/cardPro
For teams shipping every week.
$12/month
Avatar
ui/avatarLF
KA
PR
TS
LF
KA
PR
TS
Table
ui/table| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Card | $250.00 |
| INV-002 | Pending | Transfer | $150.00 |
| INV-003 | Unpaid | Card | $350.00 |
Item
ui/itemRoles and permissions
Give guests view-only access and keep drafts private until you're ready.
Kbd & separator
ui/kbd · separatorPress to search ⌘K
ProfileBillingSettings
Carousel
ui/carousel Slide 1
Slide 2
Slide 3
Slide 4
Layout
Resizable panels
ui/resizableProjects
Your content goes here
Scroll area
ui/scroll-areaNotes from the team
The launch checklist we use for every release
Automations 2.0: rules that read like sentences
How we run a four-time-zone team
The launch checklist we use for every release
Automations 2.0: rules that read like sentences
How we run a four-time-zone team
Aspect ratio
ui/aspect-ratio