shadcn.io is an independent project built on shadcn/ui
A bar at 60 percent. The track uses the theme's own height, and the fill is the default primary color. No label is shown.
Start here, then change height or color only when this bar is too quiet or too loud. A Circular Progress fits a square space better than a long track. In Vue, Ark UI does not move the bar on its own.
Installation
Anatomy
Usage
<Progress aria-label="Upload progress" class="w-full max-w-md" :value="60" />FAQ
How tall is the track?
This demo sets no height. Each theme style sets its own, from h-0.5 to h-3. The other size examples set it with a class on Progress.
What does the bar show?
value is 60 on the default range of 0 to 100. w-full max-w-md sets its width.
Which colors does it use?
The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.
What is the accessible name?
Ark UI puts the progressbar role on the track and names it with the value text, here 60%. 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="60". The rest is on the Progress page.
