shadcn.io is an independent project built on shadcn/ui
A single bar at 75 percent. A short stretch of the track is still empty, and there is no visible caption.
Use it when the work is close to done and people should see that. Switch to a Spinner only if the last step has no known size. In React, Base UI does not move the bar on its own.
Installation
Anatomy
Usage
<Progress
aria-label="Upload progress"
className="w-full max-w-md"
value={75}
/>FAQ
What does the bar show?
value is 75 on the default range of 0 to 100, so the fill covers three quarters of the track. w-full max-w-md sets its width.
What is the accessible name?
aria-label on Progress, Upload progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.
Which colors does it use?
The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.
What if my maximum isn't 100?
Pass value in the same units as the maximum.
Set max on Progress: 5 steps of 5 is max 5 and value 5.
How do I add a label?
Put a ProgressLabel inside Progress; it renders above the track. With Label Above shows it.
The label also names the bar, so you can drop the aria-label.
API Reference
Progress
Sets aria-label="Upload progress" and value={75}. The rest is on the Progress page.
