React Gauge
An instrument dial for the values a bar can't express — temperature against its limit, pressure in its safe window, humidity in a cleanroom band. A 240° arc with tick marks, operating bands (ok / warn / crit) painted on the arc, a needle, and a mono readout that takes the color of the active band, so state is carried by the number and the arc, never the needle alone. Distinct from Progress's circular gauge, which shows completion; this shows a measurement in context.
87.0°CJunction temp
2.4barChamber pressure
44%RHCleanroom humidity
73%Utilization
The junction gauge drifts live — watch the readout change color as it crosses the 85 °C warning band.
Installation
npx shadcn@latest add gauge.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value (clamped to min/max) |
| min / max | number | 0/100 | Scale range |
| bands | GaugeBand[] | [] | { from, to, tone: 'ok'\ |
| unit | string | — | Unit shown after the readout |
| label | string | — | Uppercase label under the readout |
| size | number | 160 | Diameter in px |
| precision | number | — | Readout decimals |