Progress as a ring, for a small space: a file in a list, a quota on a card.
$ pnpm dlx shadcn@latest add @dashral/progress-circleInstallation
$ pnpm dlx shadcn@latest add @dashral/progress-circleAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/progress-circle.json
Usage
example.tsx
import { ProgressCircle } from "@/components/dashral/progress-circle"
<ProgressCircle value={64} showValue size={56} aria-label="Profile complete" />Using the npm package? Import from @dashral/ui/components/progress-circle instead, here and in the examples; the rest is the same.
Examples
API reference
ProgressCircle
Also takes every prop of Radix Progress(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
value | number | null0–100; null for indeterminate (a spinning arc). | null |
color | "primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"The ring; the track is a pale version of it. | "primary" |
size | numberWidth and height in pixels. | 40 |
thickness | numberThe ring's thickness in pixels. | 4 |
showValue | booleanThe percentage in the middle, written in the locale. | false |
children | ReactNodeAnything in the middle instead, e.g. "3/5" or an icon. | — |
classNames | { track, indicator, value }Classes for each part. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Accessibility
- role="progressbar" with aria-valuenow. Label it (aria-label or aria-labelledby).
Motion
- Fills from empty when it first shows, then follows its value; indeterminate, the arc spins (slower with reduced motion).