shadcn.io is not affiliated with official shadcn/ui
Progress examples · With Label
Multi-line Label Progress for React
A progress bar at 35 percent under a title, a subtitle and the percentage.
Framework
UI library
A progress bar with a title, a subtitle for the current step and the percentage, for setups and multi-stage jobs where people want to know what is running now.
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
What is above the bar?
A column with ProgressLabel, Project Setup, over a muted span, Installing dependencies. ProgressValue sits at the end of the same row, and the full-width track wraps below.
Which line names the bar?
ProgressLabel does: the bar is announced as Project Setup.
The subtitle is plain text.
How do I have the subtitle read too?
The demo doesn't connect it.
Give the span an id and pass it to Progress as aria-describedby.
Related
- With Percentage ProgressA progress bar at 65 percent with a label
- With Label Above ProgressA progress bar at 45 percent with an
- With Count ProgressA progress bar for 7 of 10 tasks
- Empty ProgressA progress bar at 0 percent: an empty
- Standard CardA basic card with a title, a description
- With Label Below ProgressA progress bar at 80 percent with an