Shows how far a task has progressed.
$ pnpm dlx shadcn@latest add https://dashral.com/r/progress.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/progress.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/progressUsage
example.tsx
import { Progress } from "@/components/dashral/progress"
<Progress value={64} aria-label="Upload progress" />Examples
Getting-started checklist
Tick a step and the bar fills; green with a message when everything's done.
API reference
Progress
Also takes every prop of Radix Progress(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
value | number | null0–100; null for indeterminate. | — |
color | "primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"The bar; the track is a pale version of it. | "primary" |
classNames | { indicator }Classes for the bar. | — |
Accessibility
- role="progressbar" with aria-valuenow. Label it (aria-label or aria-labelledby).
Motion
- Fills from the left when it first shows, then slides to new values.