Shadcn.io is not affiliated with official shadcn/ui
Stats Variant Comparison Card
An A/B variant comparison stats card for React and Next.js with a three-tile KPI summary strip above two side-by-side variant panels, NumberFlow animated conversion rates, and emerald winning-variant accents built with shadcn/ui and Tailwind CSS
Compare A/B test variants side by side with this variant comparison stats card for React and Next.js. Features a three-tile summary strip showing visitors, lift, and confidence, plus two side-by-side variant panels with NumberFlow animated conversion rates, emerald winning-variant status dots, conversion progress bars, and a tabular-nums breakdown of impressions and signups. Built with TypeScript, NumberFlow animated values, PillTabs summary context, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for growth experiment dashboards, product analytics reports, landing page tests, and checkout funnel experiments.
Related Components
React Stats Block Comparison Delta
Period comparison with delta
React Stats Block Comparison Sparklines
Comparison with sparklines
React Stats Block Before After
Before / after state card
React Stats Block Dual Gauge
Dual gauge comparison
React Stats Block Period Comparison
Period over period card
React Stats Block Funnel Split Cohorts
Split cohort funnel
FAQ
Was this page helpful?
Sign in to leave feedback.
Treemap Card
A treemap stats card for React and Next.js with Recharts Treemap rendering proportional rectangles for category distribution, chart-token colored cells, inside labels with values, NumberFlow animated total, and a compact legend built with shadcn/ui and Tailwind CSS
Waffle Chart Card
A waffle chart stats card for React and Next.js with a 10x10 grid of colored squares showing proportional segment distribution, chart-token colored cells, a legend with percentages, and tabular-nums values built with shadcn/ui and Tailwind CSS