Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Highlight a period-over-period swing with this delta-callout comparison stats card for React and Next.js. Features a centerpiece text-4xl NumberFlow animated delta value, a muted "from X to Y" sublabel, side-by-side previous and current period tiles with tabular-nums values, an emerald / red TrendingUp or TrendingDown arrow in the header, and a motion/react parent entrance with useReducedMotion guard. Built with TypeScript, NumberFlow from @number-flow/react, shadcn/ui primitives, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for MRR deltas, experiment winners, quarterly review cards, and executive summary widgets.
Related Components
React Stats Block Before After Card
Before / after comparison
React Stats Block Comparison With Sparklines
Comparison with sparklines
React Stats Block Comparison Dual Gauge
Dual gauge comparison
React Stats Block Period Comparison Card
Period-over-period card
React Stats Block Hero Metric With Delta Arrow
Hero metric with arrow delta
React Stats Block Variant Comparison Card
Variant comparison card
FAQ
Was this page helpful?
Sign in to leave feedback.
Comparison Dual Gauge
A comparison stats card for React and Next.js with two side-by-side radial gauge charts powered by Recharts PieChart, NumberFlow animated percent values centered in each ring, semantic chart token fills, and a delta callout between the panels built with shadcn/ui and Tailwind CSS
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