shadcn.io is an independent project built on shadcn/ui
A single bar filled all the way, at 100 percent. The track has no empty stretch left, and there is no visible label.
Use a full bar when the task is finished and the track should stay on screen. A Status can replace it once you no longer need the meter. In React, Ark UI shows only the value you pass.
Installation
Anatomy
Usage
<Progress
aria-label="Upload progress"
className="w-full max-w-md"
value={100}
/>FAQ
What does the bar show?
value is 100 on the default range of 0 to 100, so the fill covers the whole track. w-full max-w-md sets its width.
Does the bar turn green at 100?
No. The fill stays bg-primary at every value. To show success, add a color class, as Success does, or replace the bar with a message.
What is the accessible name?
Ark UI puts the progressbar role on the track and names it with the value text, here 100%. The aria-label, Upload progress, sits on the root element, so put what the bar measures in visible text nearby when it matters.
How do I get the bar to 100?
Change value as the work advances. This demo passes a fixed 100.
Always pass value: without one, Ark UI starts the bar at 50.
API Reference
Progress
Sets aria-label="Upload progress" and value={100}. The rest is on the Progress page.
