Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Track goal completion at a glance with this progress list stats card for React and Next.js. Features a compact px-4 py-3 header with title and quarter label, six border-b divided rows each showing a label, a current/total ratio with tabular-nums, and a thin h-1.5 progress track with a rounded-full bg-foreground fill at the computed width percentage. Built with TypeScript, native HTML progressbar ARIA attributes, motion/react parent entrance, Lucide React target icon, and Tailwind CSS. Perfect for OKR dashboards, sprint burndown summaries, onboarding completion panels, and quota tracking widgets.
Related Components
React Stats Block Progress
Linear progress bars
React Stats Block Progress Compact List
Dense progress list
React Stats Block Progress Threshold Colored
Threshold-colored bars
React Stats Block Progress Grouped Sections
Grouped progress sections
React Stats Block Goals
Goal target status tiles
React Stats Block Targets
Quota target tracker
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Progress Compact List
An ultra-dense progress list stats card for React and Next.js with 10 rows of inline labels, narrow h-1 progress bars, and tabular-nums compact values divided by a subtle divide-y separator built with shadcn/ui and Tailwind CSS