Card
Card Title
Card description with supporting text
Card content area. Use CardHeader, CardContent, and CardFooter for structured layouts.
Card footer
Minimal Card
Cards can be used with just the subcomponents you need.
Stack & Row
Stack (gap variants)
gap="sm"
gap="lg"
Row (align variants)
align="center" — items vertically centered
A
B
C
align="between" — items spaced apart
Left
Right
Badge
Variants
Default
Secondary
Destructive
Outline
Use cases
v2.1.0
TypeScript
Breaking
Draft
Metric
Trends
Revenue
$42.8K↑
Costs
$18.2K↓
Margin
57%→
With units
Temperature
22°C
Wind Speed
15km/h
Latency
42ms↓
ProgressBar
Sizes & values
Small (25%)
Small (66%)
Medium (90%)
Medium (100%)
Custom max
3 of 5 tasks
750 / 1000 MB
KeyValue
Data display
StatusActive
Regionus-east-1
Uptime99.97%
Last deploy2 hours ago
Specifications
CPUApple M3 Pro
Memory36 GB
Storage1 TB SSD
OSmacOS 15.3
Image
Responsive image
With custom styling
Map
With label
Loading map...
Coordinates only
Loading map...