Overview
ComparisonCard displays two values side-by-side with an optional delta indicator and visual comparison bar. Perfect for period-over-period comparisons, goal vs actual, or A/B comparisons.
Features
- Side-by-side value display
- Delta indicator with auto-coloring (up/down)
- Percentage or absolute delta formats
- Optional visual comparison bar
- Automatic number formatting
Examples
Basic Comparison
With percentage delta indicator
Active Users
+11.5%
This Month
1,432
Last Month
1,284
Completion Rate
-8.2%
This Week
78
Last Week
85
With Comparison Bar
Visual bar showing relative values
Goal Progress
-18.0%
Actual
82
Target
100
Budget Usage
-10.0%
Spent
45,000
Allocated
50,000
Absolute Delta
Showing absolute difference instead of percentage
Revenue
+27,000
Q4
125,000
Q3
98,000
Subscribers
-260
Current
5,420
Previous
5,680
No Delta
Simple side-by-side without delta
Plan Comparison
Pro Plan
$29/mo
Basic Plan
$9/mo
Storage
Used
45 GB
Available
100 GB
Full Featured
With bar and percentage delta
Monthly Performance
+18.0%
November
892
October
756
Team Productivity
+9.9%
Team A
156
Team B
142
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Card title |
primary | ComparisonValue | required | Primary value (current/actual) |
secondary | ComparisonValue | required | Secondary value (previous/target) |
showDelta | boolean | true | Show delta indicator |
deltaFormat | "percentage" | "absolute" | "percentage" | Delta format type |
showBar | boolean | false | Show horizontal comparison bar |
Usage
import { ComparisonCard } from '@/ui/components/charts';
// Basic comparison with percentage delta
<ComparisonCard
title="Active Users"
primary={{ label: 'This Month', value: 1432 }}
secondary={{ label: 'Last Month', value: 1284 }}
showDelta
/>
// With comparison bar
<ComparisonCard
title="Goal Progress"
primary={{ label: 'Actual', value: 82 }}
secondary={{ label: 'Target', value: 100 }}
showBar
/>
// Absolute difference format
<ComparisonCard
title="Revenue"
primary={{ label: 'Q4', value: 125000 }}
secondary={{ label: 'Q3', value: 98000 }}
deltaFormat="absolute"
/>