Build · New

Progress

Shows how much of a task is done: uploads, goals and multi-step flows. Use it when progress can be measured; use Spinner when it can't.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/progress

Dependencies it brings: @base-ui/react

import { ProgressBar } from "@/components/ui/progress";

<ProgressBar value={60} label="Uploading statement.pdf" />

sm, md and lg are 2, 4 and 8px tall; value={null} shows diagonal stripes when the amount isn't known.

ProgressBarStepped with 3 to 8 steps: done, current and upcoming, read as “Step 3 of 8”.

ProgressCircle for upload rows and small spaces, 16, 20 or 24px, and it needs a label.

Prop	Type	Default	Description
`value`	`number \| null`		Done from `min` to `max`; `null` is indeterminate.
`min / max`	`number`	`0 / 100`	The range.
`label`	`ReactNode`		What's progressing.
`showValue`	`boolean`	`true`	Figma's Show text: the percentage at the inline end.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Figma's Size.
`numerals / aria-label`	`…`		Numeral system, and a name when there's no visible label.

Prop	Type	Description
`steps`	`number`	3 to 8.
`current`	`number`	Steps done; the next one is in progress.
`label / size`	`…`	The label under the bar, and the size.

Prop	Type	Default	Description
`value / min / max`	`number`		As on the bar.
`label`	`string`		Required: there's no visible text.
`size`	`16 \| 20 \| 24`	`16`	The size.

role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax and the value text, named by its label.
Don't show it for waits under a second, and don't let it go backwards.

The bar fills from the inline start: from the right in Arabic, and the steps too.

Numerals: The percentage follows numerals or KanzProvider (٤٠٪).
Arabic typography: The label is label-14 Medium, the stepped label label-16.
Mixed-direction text: Put Latin file names in <bdi> inside an Arabic label.