Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Progress - With Count
A progress bar with item count display showing completion ratio like 7 of 10 tasks with labeled description
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Concrete numbers—7 of 10 feels more tangible than 70 percent. This React Progress component displays item count (7 of 10) alongside label (Tasks completed) using flex justify-between layout. Built with shadcn/ui Progress and Radix UI primitives, count format makes discrete progress concrete—perfect for task lists, file batches, multi-step wizards, checklist completion, or any operation where showing actual items completed feels more meaningful than abstract percentages.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
With Percentage
Progress with percentage display
Multi-line Label
Progress with title and subtitle
Stepper
Multi-step progress indicator
Half Progress
50 percent progress state
Badge
Count badges
With Label Above
Progress with status label
Questions you might have
React Progress - With Label Below
A progress bar with encouraging text label positioned below showing motivational message like Almost there at 80 percent
React Progress - Multi-line Label
A progress bar with multi-line label showing title, subtitle, and percentage for rich contextual progress information at 35 percent