Shadcn.io is not affiliated with official shadcn/ui
Stats Funnel With Stage Icons
A conversion funnel stats card for React and Next.js with per-stage Lucide icons in muted circle badges, proportional stage bars, and conversion-from-previous percentages built with shadcn/ui and Tailwind CSS
Visualize a conversion flow with iconified stages using this funnel stats card for React and Next.js. Features five funnel stages with a size-4 Lucide icon inside a rounded-full bg-muted circle on the left of each stage label, proportional width bars keyed off the top stage, tabular-nums counts, conversion-from-previous percentages, and an overall conversion header in the top-right. Built with TypeScript, Lucide React icons, motion/react parent entrance, and Tailwind CSS. Perfect for marketing funnel dashboards, checkout flow analytics, onboarding conversion tracking, and lead pipeline reports.
Related Components
React Stats Block Revenue Funnel
Revenue-aware funnel card
React Stats Block Funnel Vertical Stages
Vertical-stage funnel
React Stats Block Funnel With Dropoff Rate
Drop-off rate funnel
React Stats Block Funnel Split Cohorts
Cohort-split funnel
React Stats Block Progress Bar List
Linear progress list
React Stats Block Progress Grouped Sections
Grouped progress sections
FAQ
Was this page helpful?
Sign in to leave feedback.
Funnel With Dropoff Rate
A vertical funnel stats card for React and Next.js with proportional width bars per stage, prominent amber and red drop-off percentages beside each row, tabular-nums counts, and an overall conversion summary header built with shadcn/ui and Tailwind CSS
Goal Ring Tiles
A goal ring tile grid stats card for React and Next.js with 4 radial PieChart rings via ChartContainer, center percentage labels, semantic status dots, and tabular-nums value displays built with shadcn/ui and Tailwind CSS