Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Contrast two completion percentages side-by-side with this dual gauge comparison stats card for React and Next.js. Features two aspect-square radial gauges rendered as ChartContainer-wrapped PieCharts with fixed innerRadius and outerRadius, a track Pie at 100 percent behind a filled Pie at the current value, NumberFlow animated percent values centered in each ring, var(--chart-1) and var(--chart-2) semantic fills via the ChartConfig, and a delta callout strip spanning both panels. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart, NumberFlow from number-flow/react, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for A/B test summary cards, team completion dashboards, pre-versus-post campaign comparisons, and experiment result overviews.
Related Components
React Stats Block Period Comparison Card
Period over period comparison
React Stats Block Comparison With Delta Callout
Comparison with delta callout
React Stats Block Comparison With Sparklines
Comparison with sparklines
React Stats Block Before After Card
Before and after card
React Stats Block Hero Metric With Gauge Ring
Hero metric with gauge ring
React Stats Block Half Donut Card
Half donut progress card
FAQ
Was this page helpful?
Sign in to leave feedback.
Cohort Retention Card
A cohort retention table stats card for React and Next.js with a triangular heat-colored grid showing retention percentages by cohort month and period, intensity-mapped cell backgrounds, row and column headers, and tabular-nums values built with shadcn/ui and Tailwind CSS
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