Progress
A slim horizontal bar that shows completion toward a goal. Use it for determinate work such as uploads, multi-step flows, or quota usage where the percentage is known. The filled track animates via a CSS transform, so updating value produces a smooth transition. Pass value={null} for an indeterminate (unknown-duration) state.
Determinate
The fill keeps a raw bg-primary: blue here isn't marking a choice, it's showing how far along something is, so it doesn't take bg-selected like a chosen state would. max moves the denominator when progress is counted in steps rather than percent.
<div class="w-80 space-y-4">
<Progress value={0} />
<Progress value={50} />
<Progress value={100} />
<Progress value={3} max={5} />
<Progress value={65} class="h-4" />
</div>Indeterminate
value={null} for an operation whose length is unknown. Prefer a real percentage whenever one exists — an indeterminate bar tells the reader only that something is happening.
<div class="w-80">
<Progress value={null} />
</div>Upload row
A bar on its own says how far but not how far through what. Name the thing, put the percentage at the other end of the row, and keep the detail underneath. No border on the card — a surface separates from the page by tone alone.
Uploading… 7.2 MB of 10 MB
<div class="bg-card surface-sheen w-96 space-y-2 rounded-lg p-4">
<div class="flex items-center justify-between text-sm">
<span class="font-medium">annual-report.pdf</span>
<span class="text-muted">72%</span>
</div>
<Progress value={72} />
<p class="text-muted text-xs">Uploading… 7.2 MB of 10 MB</p>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number|null | 0 | Current progress amount. Interpreted relative to |
max | number | 100 | Upper bound the |
class | string | Extra Tailwind classes merged onto the root track (e.g. height, radius). |