Progress Bar
Determinate and indeterminate progress bar with label, percentage, sizes and animated stripes.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
ProgressBarProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | null | Current value. Omit (or pass `null`) for an indeterminate bar. |
| max | number | 100 | — |
| size | "sm" | "md" | "lg" | "md" | — |
| label | React.ReactNode | — | — |
| showValue | boolean | true | Show the percentage next to the label. Ignored when indeterminate. |
| striped | boolean | false | Animated diagonal stripes on the fill. |
| barClassName | string | — | Fill color classes, e.g. "bg-emerald-500". |
Install
$ npx shadcn@latest add https://chromotion.dev/r/progress-bar.json