Shadcn.io is not affiliated with official shadcn/ui
Stats Pipeline Stage Strip
A horizontal pipeline stats card for React and Next.js with five connected chevron-shaped stages showing deal flow progression, width-proportional stage widths by count, gradient-darkening colors toward final stage, and NumberFlow animated stage values built with shadcn/ui and Tailwind CSS
Visualize sales pipeline flow with this horizontal stage strip stats card for React and Next.js. Features five connected stages rendered as chevron-shaped pills using CSS clip-path, stage widths proportional to count, gradually darkening backgrounds from lead to closed using chart-token mixing, NumberFlow animated count and value per stage, and an overall header summary. Built with TypeScript, pure CSS clip-path chevrons, NumberFlow, motion/react parent entrance with useReducedMotion, and Tailwind CSS. Perfect for CRM pipeline dashboards, sales funnel visualizations, deal flow trackers, and conversion progression widgets.
Related Components
React Stats Block Funnel Vertical
Vertical proportional stage bars
React Stats Block Funnel Dropoff
Funnel with dropoff rate
React Stats Block Funnel Icons
Funnel with stage icons
React Stats Block Revenue Funnel
Horizontal revenue funnel
React Stats Block Timeline
Vertical timeline events
React Stats Block Progress List
Linear progress bars
FAQ
Was this page helpful?
Sign in to leave feedback.
Pictograph Unit Card
A pictograph unit stats card for React and Next.js with 50 user icons showing active versus inactive users, filled foreground icons for active and outlined muted icons for inactive, NumberFlow animated active count, and percentage summary built with shadcn/ui and Tailwind CSS
Progress Bar List
A linear progress list stats card for React and Next.js with per-row labels, current/total ratios on the right, thin h-1.5 foreground progress bars, and border-b row dividers built with shadcn/ui and Tailwind CSS