Shadcn.io is not affiliated with official shadcn/ui
Stats Before After Card
A before-and-after comparison stats card for React and Next.js with a left before value, centered delta callout, right NumberFlow animated after value, and a mini-timeline footer built with shadcn/ui and Tailwind CSS
Tell a clear before-and-after story with this comparison stats card for React and Next.js. Features a three-column layout with a muted before value on the left, a centered arrow delta badge, a NumberFlow animated after value on the right, a tabular-nums delta footer, and a compact horizontal sparkline timeline connecting the two points. Built with TypeScript, NumberFlow from @number-flow/react wrapped in a min-w-[140px] container with an isAnimated mount guard, motion/react parent entrance with useReducedMotion guard, Lucide React icons, and Tailwind CSS. Perfect for A/B test results, pre-and-post launch summaries, onboarding improvement reports, and experiment outcome cards.
Related Components
React Stats Block Period Comparison Card
Period over period comparison
React Stats Block Comparison With Delta Callout
Delta callout comparison
React Stats Block Comparison With Sparklines
Comparison with sparklines
React Stats Block Comparison Dual Gauge
Dual gauge comparison
React Stats Block Variant Comparison Card
A/B variant card
React Stats Block Hero Metric With Delta Arrow
Hero metric with delta
FAQ
Was this page helpful?
Sign in to leave feedback.
Bar Chart With Target Line
A bar chart stats card for React and Next.js with a horizontal ReferenceLine target threshold, per-bar Cell colors for above/below target, a ChartContainer-wrapped Recharts BarChart, and tabular-nums summary row built with shadcn/ui and Tailwind CSS
Benchmark Bar Card
A benchmark comparison stats card for React and Next.js with horizontal scale lines per metric showing your position against industry average and top 10 percent markers, semantic positioning dots, and tabular-nums values built with shadcn/ui and Tailwind CSS