Progress
Use Progress to show how much of an ongoing task is complete, such as an upload or import.
Preview
Percent, count, and waiting states
Compare an 82% registry build, 12 of 16 theme tokens, and a progress indicator waiting for a known value.
Installation
New to this Registry? Complete the base setup before continuing.
npx shadcn@latest add @neumorphism-ui/progressInstall the shared base once, then add components and their dependencies with the CLI.
Usage
Supply the current value and max, and name the task with aria-label or aria-labelledby. Connect changing text to application progress rather than using a fixed percentage in a live task.
"use client";
import { Progress } from "@/components/ui/progress";
export default function Example() {
return <Progress value={72} aria-label="File upload" />;
}API Reference
Uses Base UI Progress progressbar semantics. Normalizes valid max and value values, and exposes an indeterminate state when value is missing or invalid.
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Progress | value | number | null | null | The current progress value, normalized between 0 and max. |
Progress | max | number | 100 | The total range greater than 0; invalid values fall back to 100. |
Progress | aria-label / aria-labelledby | string | — | The accessible name of the task in progress. |
Progress | getAriaValueText | (formattedValue: string, value: number | null) => string | — | Creates aria-valuetext when a description beyond the numeric value is needed. |
Accessibility
- 01
Progress needs an aria-label or aria-labelledby that describes the task, such as File upload.
- 02
A visible percentage is not automatically associated with the progressbar, so connect its label explicitly.
- 03
A null value represents an indeterminate state and should not be accompanied by completion-percentage text.