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...
Table
Sortable with search
| Language | Type | Stars | Usage |
|---|---|---|---|
| TypeScript | Static | 98k | 42% |
| Python | Dynamic | 62k | 28% |
| Rust | Static | 95k | 10% |
| Go | Static | 123k | 15% |
Compact
| Metric | Value |
|---|---|
| Uptime | 99.97% |
| p50 Latency | 42ms |
| p99 Latency | 180ms |
| Error Rate | 0.03% |
CodeBlock
TypeScript
typescript
JSON with filename
package.json
MermaidDiagram
Flowchart
Loading diagram...
Sequence diagram
Loading diagram...
BarChart
Revenue breakdown
Stacked
LineChart
Trend over time
Multi-series
AreaChart
Resource usage
Single area
PieChart
Distribution
Donut
RadarChart
Skill comparison
Single profile