A radial gauge for progress, usage, or percentages. Built with plain SVG, an animated reveal, and a count-up centre value.
A value over a maximum, with a centre label and the max appended.
Pass Tailwind linear-gradient classes via the gradient prop to recolour the bars, and add a unit suffix.
Show the remaining value (max - value) in the centre with show-remaining.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value (required). |
max | number | — | Maximum value (required). |
centerLabel | string | "" | Label shown under the centre value. |
centerValue | number | string | null | Override the centre value (defaults to value, or remaining when showRemaining). |
showMax | boolean | false | Append /max to the centre value. |
showRemaining | boolean | false | Use max - value as the centre value. |
suffix | string | "" | Small unit appended to the centre value (e.g. %). |
gradient | string | null | Tailwind linear-gradient classes sampled to colour the bars (e.g. from-sky-500 to-fuchsia-500). |
colors | [pos, L, C, H][] | rainbow | OKLCH colour stops used when no gradient is set. |
totalBars | number | 40 | Number of radial bars. |
animateBars | boolean | true | Reveal the bars when scrolled into view. |
animateValue | boolean | true | Count the centre value up on reveal. |
compact | boolean | true | Format numbers with compact notation (1.2K). |