shadcn.io is an independent project built on shadcn/ui
A bar at 25 percent. The fill is the destructive color, and the track is a lighter tint of it. No label is shown.
Use the destructive color when the task is failing or blocked, not for an ordinary upload. Pair it with text, or with a Status, so the meaning is not color alone. 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 **:data-[slot=progress-indicator]:bg-destructive *:data-[slot=progress-track]:bg-destructive/20"
value={25}
/>FAQ
How is the bar colored?
With classes on Progress, since it has no color prop. **:data-[slot=progress-indicator]:bg-destructive colors the fill, which sits inside the track.
*:data-[slot=progress-track]:bg-destructive/20 tints the track.
How do I go back to the default colors?
Remove the two color classes. The fill goes back to bg-primary and the track to bg-muted.
Does 25 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={25}. The rest is on the Progress page.
