Shadcn.io is not affiliated with official shadcn/ui
Stats Funnel Split Cohorts
A split-cohort funnel stats card for React and Next.js with parallel mobile and desktop bars at every stage, proportional stage widths, inline conversion percentages, and a delta column comparing the two cohorts built with shadcn/ui and Tailwind CSS
Compare two cohorts stage by stage with this split-cohort funnel stats card for React and Next.js. Features parallel mobile vs desktop bars at every stage, proportional widths derived from each cohort's top-of-funnel count, inline stage-over-stage conversion percentages, a delta column highlighting the stronger cohort, and staggered motion/react entrance on each stage row. Built with TypeScript, motion/react entrance animations, NumberFlow-free deterministic totals, Lucide React device icons, and Tailwind CSS. Perfect for mobile vs desktop conversion funnels, new vs returning user onboarding, A/B test cohort comparison, and multi-channel acquisition dashboards.
Related Components
React Stats Block Revenue Funnel
Single-cohort revenue funnel
React Stats Block Funnel Vertical Stages
Vertical funnel with stage labels
React Stats Block Funnel With Dropoff Rate
Funnel with drop-off callouts
React Stats Block Funnel With Stage Icons
Funnel with per-stage icons
React Stats Block Variant Comparison Card
A/B variant comparison card
React Stats Block Before After Card
Period before/after comparison
FAQ
Was this page helpful?
Sign in to leave feedback.
Dumbbell Chart Card
A dumbbell chart stats card for React and Next.js with horizontal rows showing two connected dots per category representing start and end values, a connecting line between dots, delta labels, and semantic direction colors built with shadcn/ui and Tailwind CSS
Funnel Vertical Stages
A vertical stacked funnel stats card for React and Next.js with full-width proportional stage bars, inline drop-off connectors, and tabular-nums conversion percentages built with shadcn/ui and Tailwind CSS