shadcn.io is an independent project built on shadcn/ui
A bar at 70 percent. The fill is the success color, and the track is a lighter tint of it. No label is shown.
Use the success color when the task is going well, not as the default for every bar. A Status can mark done once you drop the meter. In React, Base UI does not time the upload.
Installation
Anatomy
Usage
<Progress
aria-label="Upload progress"
className="w-full max-w-md **:data-[slot=progress-indicator]:bg-success *:data-[slot=progress-track]:bg-success/20"
value={70}
/>FAQ
How is the bar colored?
With classes on Progress, since it has no color prop. **:data-[slot=progress-indicator]:bg-success colors the fill, which sits inside the track.
*:data-[slot=progress-track]:bg-success/20 tints the track.
Why the success token and not a palette color?
success is a theme color, so it follows light and dark mode and any theme you switch to. A class like bg-green-500 stays the same everywhere.
Does 70 pick the color?
No. value only sets the amount; the color classes apply at any value. Change them yourself when the state changes, such as when an upload fails.
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.
API Reference
Progress
Sets aria-label="Upload progress" and value={70}. The rest is on the Progress page.
