Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Made by imskyleenPowered by
Installation
Base UI migration — Progress CSS variable replaced. Previously the value track used the Radix-specific
--radix-progress-indicator-transform CSS variable inline. Base UI writes the width directly on the indicator
element; the registry's indicator now uses style={{ width: '100%' }} on the motion child and applies its transform
via Motion. If you wrote custom CSS targeting --radix-progress-indicator-*, switch to the indicator's inline
width or introduce your own CSS variable. See MIGRATION.md.
When to use
The Progress component displays completion progress of a task with a visual progress bar. Use this decision tree to determine when it's appropriate:
Usage
<Progress value={50} />Props
Animate UI Props
Prop
Type
Accessibility
- Renders as
role="progressbar"witharia-valuemin,aria-valuemax, andaria-valuenow(or marks as indeterminate whenvalue === null). - Provide an accessible label — either
aria-labelon<Progress>or pointaria-labelledbyat a visible heading — so assistive tech can describe what is loading. - For long tasks (>5s), complement the bar with a textual status such as "Uploading 12 of 48 files" — a bare percentage number rarely tells the user enough to decide whether to wait.
Credits
- We use Base UI for the progress component.
- We take our inspiration from Shadcn UI for the progress style.
- We use Animate UI from imskyleen for all the animations.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109