A semicircular gauge with colored zones, tick marks, an animated needle and a large readout that counts to the value.
npx shadcn@latest add https://hyperblur.dev/r/gauge-meter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gauge-meter.tsx.
import { GaugeMeter } from "@/components/hyperblur/gauge-meter"
<GaugeMeter value={72} unit="%" label="CPU load" size={220} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 72 | Current value. Changing it sweeps the needle and counts the readout. |
| min | number | 0 | Value at the left end of the arc. |
| max | number | 100 | Value at the right end of the arc. |
| zones | { to: number; color: string; label?: string }[] | red to 40, amber to 70, green to 100 | Colored bands. Each zone runs from the previous zone's end to its own to value. |
| label | string | Caption under the readout. Falls back to the label of the zone the value is in. | |
| unit | string | "" | Unit shown after the readout, such as % or ms. |
| decimals | number | 0 | Decimal places in the readout and the min and max labels. |
| ticks | number | 11 | Tick marks along the inside of the arc. Zero hides them. |
| showMinMax | boolean | true | Show the min and max labels under the ends of the arc. |
| needleColor | string | "#ededed" | Needle and hub color. |
| size | number | string | "100%" | Width of the gauge. Height follows the aspect ratio. |
| valueFormatter | (n: number) => string | Custom readout formatting. Overrides decimals. | |
| animate | boolean | true | Sweep the zones and needle in on mount and count the readout. |