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, Ark 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?
Ark UI puts the progressbar role on the track and names it with the value text, here 25%. The aria-label, Upload progress, sits on the root element, so put what the bar measures in visible text nearby when it matters.
API Reference
Progress
Sets aria-label="Upload progress" and value={25}. The rest is on the Progress page.
