Shadcn.io is not affiliated with official shadcn/ui
Stats Progress With Target Ratio
A progress list stats card for React and Next.js with per-row current/target tabular ratios, threshold-coloured thin progress bars, and semantic goal status built with shadcn/ui and Tailwind CSS
Track team quota attainment row by row with this progress list stats card for React and Next.js. Features a header with overall completion count, five rows with labels on the left and prominent current/target tabular-nums ratios on the right, thin h-1.5 progress bars below each row coloured by threshold (emerald on track, amber approaching, red missed), and aria-valued role='progressbar' semantics. Built with TypeScript, shadcn/ui primitives, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for quarterly OKR trackers, sales quota boards, onboarding checklists, and fundraising campaign dashboards.
Related Components
React Stats Block Progress
Linear goal bars
React Stats Block Progress Bar List
Labelled progress rows
React Stats Block Threshold Progress
Threshold-coloured progress
React Stats Block Progress Delta
Progress with delta badges
React Stats Block Progress Compact
Compact progress list
React Stats Block Goal Target
Goal cards with status
FAQ
Was this page helpful?
Sign in to leave feedback.
Progress With Sparkline
A progress list stats block for React and Next.js where each row pairs a tabular-nums target ratio, a linear progress bar, and a compact inline ChartContainer sparkline AreaChart showing recent trend built with shadcn/ui and Tailwind CSS
Quota Tile Grid
A quota tile grid stats card for React and Next.js with six usage tiles, threshold-keyed progress bar colors, reset countdown subtitles, and used-over-limit ratios built with shadcn/ui and Tailwind CSS