Component Showcase
Live demos of all primitives, compounds, and charts. Every component shown with realistic data.
Primitives
Sparkline
@/components/shared/primitives/sparklineGauge
@/components/shared/primitives/gaugeProgressBar
@/components/shared/primitives/progress-barCompletion68%
Warning85%
Danger95%
TrendIndicator
@/components/shared/primitives/trend-indicatorUp:+20.3%
Down:-12.7%
Inverted:-22.0%
StatusDot
@/components/shared/primitives/status-dotActiveInactivePendingErrorWarningProcessing
Rating
@/components/shared/primitives/ratingRead-only (3.5)
3.5Interactive (3/5)
NumberTicker
@/components/shared/primitives/number-tickerNumber
0Percent
0.0%TimelineDot
@/components/shared/primitives/timeline-dotOrder Placedby Customer2 hours ago
Preparingby Kitchen30 minutes ago
Delivery
DiffDisplay
@/components/shared/primitives/diff-displayBeforeDraft
AfterPublished
AddedNew value
RemovedOld text
ColorSwatch
@/components/shared/primitives/color-swatchBrand Primary#4f46e5
Emerald#10b981
Amber#f59e0b