Search nx-ui
Jump to any foundation, component, block or example.
Progress Circle
Circular and half-circle progress gauges with a centre value and label, drawn as pure SVG arcs.
$
Registry itembunx shadcn@latest add @nx-ui/progress-circleInstalls withutils
Sizes
72%
72%
72%
72%
With labels
A gauge for how much of the verification checklist is done.
64%Verified
100%Complete
20%Started
Half circle
48%Capacity
82%Soil health
Custom centre content
88/ 100
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | — |
max | number | 100 | — |
size | keyof typeof sizeMap | "md" | — |
variant | "circle" | "half" | "circle" | — |
label | React.ReactNode | — | — |
showValue | boolean | true | Show the percentage in the centre (default true). |
children | React.ReactNode | — | — |
…extends Omit<React.ComponentProps<"div">, "children">