shadcn.io is not affiliated with official shadcn/ui
Progress examples · With Label
With Count Progress for React
A progress bar for 7 of 10 tasks completed, with its label and the count above it.
Framework
UI library
A progress bar that counts items instead of percent: 7 of 10 tasks. A count reads more concretely than 70% for checklists, batches and steps.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
Where do 7 and 10 come from?
Two constants, COMPLETED and TOTAL, at the top of the file. Change them, or pass your own numbers, to move the bar and the text together.
How does the bar show 7 of 10?
Progress gets max 10 and value 7, and ProgressValue is a function that returns the value, of, and TOTAL.
Does a screen reader hear 7 of 10?
It hears the value as a percent. Pass getAriaValueText to read 7 of 10 instead.
Related
- With Percentage ProgressA progress bar at 65 percent with a label
- Multi-line Label ProgressA progress bar at 35 percent under a
- Half ProgressA progress bar at 50 percent, filled to
- Badge with Text (Standard)A default badge with a short label for a
- With Label Above ProgressA progress bar at 45 percent with an
- With Label Below ProgressA progress bar at 80 percent with an