Circular Progress
SVG ring progress with centered percentage, adjustable size, thickness and color.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
CircularProgressProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| value* required | number | — | 0 - 100 |
| size | number | 96 | Outer diameter in px |
| thickness | number | 8 | Stroke width in px |
| color | string | "text-primary" | Tailwind text color class for the arc, e.g. "text-emerald-500". Defaults to text-primary. |
| children | React.ReactNode | — | Replace the default percent text in the center. |
| showValue | boolean | true | — |
| label | string | "Progress" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/circular-progress.json