Shadcn.io is not affiliated with official shadcn/ui
Stats Comparison With Sparklines
A period comparison stats card for React and Next.js with two side-by-side columns, each showing a NumberFlow animated value and a 48px ChartContainer sparkline, separated by a vertical divider and a delta callout built with shadcn/ui and Tailwind CSS
Compare this-period versus last-period performance with this dual-sparkline comparison stats card for React and Next.js. Features a grid-cols-2 body with a vertical divide-x separator, NumberFlow animated current and previous values wrapped in min-w containers, two independent ChartContainer sparklines at h-12 with trend-keyed stroke colours, a bottom delta callout row with a TrendingUp icon, and a motion/react parent entrance. Built with TypeScript, ChartContainer from shadcn/ui, Recharts AreaChart sparklines, NumberFlow, motion/react, Lucide React icons, and Tailwind CSS. Perfect for SaaS MRR comparisons, marketing channel A/B tests, ops error-rate period toggles, and finance month-over-month dashboards.
Related Components
React Stats Block Comparison With Delta Callout
Comparison card with delta pill
React Stats Block Before After Card
Before and after comparison
React Stats Block Period Comparison Card
This period versus last period
React Stats Block Comparison Dual Gauge
Dual gauge comparison
React Stats Block Variant Comparison Card
A/B variant comparison
React Stats Block Sparkline
Inline sparkline card
FAQ
Was this page helpful?
Sign in to leave feedback.
Comparison With Delta Callout
A period comparison stats block for React and Next.js with a centerpiece text-4xl NumberFlow delta, muted from-to labels, side-by-side baseline values, and semantic trend arrow built with shadcn/ui and Tailwind CSS
Concentric Rings Card
A concentric activity rings stats card for React and Next.js with three SVG progress rings inspired by Apple Watch, stroke-dasharray animated arcs, NumberFlow animated center value, and semantic ring colors built with shadcn/ui and Tailwind CSS