Components
Progress
A progress indicator displaying the completion of a task as a horizontal bar, built on Radix UI's Progress primitive.
Install
npx shadcn@latest add https://atomx.acau.net/r/progress.jsonUsage
Pass a value between 0 and 100 to render the bar. Leave value undefined (or null) to render an indeterminate state. The indicator translates horizontally with a CSS transition, so animating between values is automatic.
<Progress value={66} />For controlled previews (e.g. animating from 0 to 100), wrap the Progress in a small Client Component that owns a useState. The MDX page renders as a Server Component, so hooks at the MDX top level are not supported.
Preview
33%
66%
100%
Props
Progress extends React.ComponentProps<typeof ProgressPrimitive.Root> from @radix-ui/react-progress.
| Prop | Type | Notes |
|---|---|---|
value | number | null | undefined | Current progress (0–100). null / undefined renders an indeterminate state. |
max | number | The maximum value. Defaults to 100. |
getValueLabel | (value: number, max: number) => string | Custom accessible label for the current value. |
className | string | Forwarded to the outer track element. |