Stop Rebuilding UI
Previous: Pareto Chart Card
Next: Pictograph Unit Card

Stats Period Comparison Card

A period-over-period comparison stats card for React and Next.js with two side-by-side tabular-nums values separated by a large delta callout, NumberFlow on the current value, and a semantic trend header built with shadcn/ui and Tailwind CSS

Scroll to load preview

Compare this period to last period at a glance with this comparison stats card for React and Next.js. Features two side-by-side tabular-nums values split by a divide-x column, a prominent delta callout bar between them, a semantic TrendingUp header pill with percent change, a NumberFlow animated current value with layout-stable min-width, and a motion/react parent fade entrance. Built with TypeScript, NumberFlow from @number-flow/react, shadcn/ui Card tokens, Lucide React icons, motion/react parent entrance, and Tailwind CSS. Perfect for executive summary cards, A/B test winners, MRR period snapshots, and week-over-week reporting dashboards.

React Stats Block Comparison With Delta Callout

Comparison with callout

React Stats Block Comparison With Sparklines

Comparison with paired sparklines

React Stats Block Before After Card

Before vs after card

React Stats Block Variant Comparison Card

A/B variant comparison

React Stats Block Comparison Dual Gauge

Dual gauge comparison

React Stats Block Hero Metric With Delta Arrow

Hero metric with delta arrow

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

Pareto Chart Card

A Pareto chart stats card for React and Next.js with Recharts ComposedChart combining descending-sorted bars and a cumulative percentage line, a ReferenceLine at the 80% threshold, NumberFlow animated top-contributor callout, and dual Y-axes built with shadcn/ui and Tailwind CSS

Pictograph Unit Card

A pictograph unit stats card for React and Next.js with 50 user icons showing active versus inactive users, filled foreground icons for active and outlined muted icons for inactive, NumberFlow animated active count, and percentage summary built with shadcn/ui and Tailwind CSS