Showcase
All components at actual size.
Actions
Button
Button Group
Spinner
Display
Badge
Primary
Secondary
Bordered
Success
Warning
Danger
Chip
Default
Selected
Removable
Avatar
AB
CD
EF
GH
Avatar Group
A
B
C
+3
Notification Badge
Alert
Informational message
Action completed successfully.
Please review your input.
An error occurred.
Banner
New release v2.0 is now available. Check out what's new!
Your trial ends in 3 days. Upgrade to continue.
Upgrade
Toast
Update available
A new version has been released.
Card
Card Title
Card content goes here.
Stats Card
Total Revenue
$45,231
↑ +12.5% this monthActive Users
2,350
↓ -3.1% this week
Progress
Rating
Separator
Above
Below
List
General
Privacy
Notifications
Empty State
No documents
Get started by creating your first document.
Table
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Designer | Active |
| Bob Smith | Engineer | Away |
| Carol White | Manager | Offline |
Code Block
TypeScript
function greet(name: string) {
return 'Hello, ' + name + '!';
}
greet('World');Forms
Input
Required
Number Input
OTP Input
Select
Select a framework
Next.js
SvelteKit
Nuxt.js
Astro
Textarea
Slider
File Upload
Drop files here or browse
PNG, JPG, PDF up to 10MB
Checkbox
Switch
Off
On
Radio Group
Navigation
Tabs — Pill
Tabs — Underline
Breadcrumb
Pagination
Stepper
2
Payment
3
Review
Toolbar
Overlays & Feedback
Accordion
Yes. It adheres to WAI-ARIA design patterns.
Yes, smooth height transitions powered by CSS grid.
Dropdown
Popover
Popover Title
This is the popover content. Click the button again to close.
Tooltip
Tooltip on top
Dialog
Sheet
Sheet Title
Sheet content goes here. This slides in from the right.