shadcn.io is an independent project built on shadcn/ui
Tasks completed sits at the start of the row and 7 of 10 at the end. The bar under it is filled to 7 of 10.
Count finished items when a percentage would hide the real numbers. Steps fit better when each item is a named stage. In React, Ark UI does not move the bar on its own.
Installation
Anatomy
Usage
<Progress className="w-full max-w-md gap-2" max={TOTAL} value={COMPLETED}>
<ProgressLabel className="font-normal text-muted-foreground">
Tasks completed
</ProgressLabel>
<ProgressValue className="font-medium text-foreground">
{COMPLETED} of {TOTAL}
</ProgressValue>
</Progress>FAQ
Where do 7 and 10 come from?
Two constants, COMPLETED and TOTAL, at the top of the file. Change them, or pass your own numbers, to move the bar and the text together.
How does the bar show 7 of 10?
Progress gets max 10 and value 7, and ProgressValue's children are the text 7 of 10.
What names the bar?
ProgressLabel is visible text: Ark UI puts the progressbar role on the track and names it with the value text, 70%.
Does a screen reader hear 7 of 10?
It hears the value as a percent. Pass translations with a value function to read 7 of 10 instead.
API Reference
Progress
Sets max={TOTAL} and value={COMPLETED}. The rest is on the Progress page.
