Shadcn.io is not affiliated with official shadcn/ui
Stats Progress Grouped Sections
A progress list stats block for React and Next.js with uppercase section eyebrows, grouped linear progress bars, tabular-nums ratios, and threshold-aware bar colors built with shadcn/ui and Tailwind CSS
Track quota attainment across multiple regions with this grouped progress list stats card for React and Next.js. Features a single bg-card container with text-[10px] uppercase tracking-widest section eyebrows, linear h-1.5 progress bars in a bg-muted track, threshold-aware bar colours that shade emerald / amber / red as values cross their targets, border-b row dividers, and a header showing the overall attainment ratio. Built with TypeScript, shadcn/ui primitives, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for sales quota dashboards, regional OKR trackers, onboarding completion panels, and multi-team goal summaries.
Related Components
React Stats Block Progress Bar List
Linear progress bars
React Stats Block Progress Threshold Colored
Threshold-aware bars
React Stats Block Progress With Target Ratio
Target ratio progress
React Stats Block Progress With Delta Badges
Progress with delta badges
React Stats Block OKR Target Cards
OKR target tile cards
React Stats Block Goal Target Tile Grid
Goal target tile grid
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Progress Threshold Colored
A threshold-aware progress list stats card for React and Next.js with thin h-1.5 progress bars whose fill color shifts from emerald to amber to red based on utilization tiers built with shadcn/ui and Tailwind CSS