Stat Comparison
A side-by-side comparison component for visualizing differences between two values with optional progress bar and change indicator.
Installation
$ npx shadcn@latest add @orecus/stat-comparisonDependencies:
lucide-reactmotion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/progress@orecus/use-reduced-motion@orecus/use-animated-number
Component
Side-by-side comparisons with visual bar indicators.
Revenue
This Month
vs
Last Month
This Month100%
Last Month87%
Active Users
Current
vs
Previous
Current100%
Previous76%
Bounce Rate
This Week
vs
Last Week
This Week100%
Last Week87%
Conversion Rate
Desktop
vs
Mobile
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Title for the comparison |
primary* | { value: number | string; label: string } | — | Primary/current value |
secondary* | { value: number | string; label: string } | — | Secondary/comparison value |
difference | { value: string; direction: 'up' | 'down' | 'neutral'; color?: ThemeColor } | — | Difference indicator |
showBar | boolean | true | Show visual comparison bar |
barColor | ThemeColor | 'primary' | Color for the comparison bar |
animated | boolean | true | Whether to animate elements on mount |
animateValue | boolean | true | Whether to animate numeric values with a counting effect |
loading | boolean | false | Shows skeleton loading state |
cardProps | CardProps | — | Props to pass to the Card wrapper |
className | string | — | Additional CSS classes |