Gauge

Radial gauge with a sprung needle, redline and digital readout.

Installs motion.

GearNIdle

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/gauge.json

import { Gauge } from "@/components/ui/gauge"

<Gauge label="Speed" unit="km/h" value={88} max={260} ticks={13} />

Printed bands for cold, normal and hot. The band holding the value lights up.

Feed it new values as often as you like; the needle springs to each one without re-rendering the dial.

Small dials print their legends larger so they stay readable. className can set any other width.

Accepts every div attribute; the ref points at the root, which has role="meter".

Prop	Type	Default
`value`	`number` Current reading, clamped to min and max.	None
`min`	`number` Start of the scale.	`0`
`max`	`number` End of the scale.	`100`
`label`	`string` Legend printed on the dial. Also the accessible name unless aria-label is set.	None
`unit`	`string` Printed under the readout and read after the value.	None
`ticks`	`number` Numbered intervals on the scale. Numerals shrink, then skip, to fit.	`10`
`redline`	`number` Start of the red zone. Past it the scale prints red and the arc burns red.	None
`zones`	`{ from: number; to: number; color: NeonColor }[]` Colored bands inside the scale. The band holding the value lights up.	None
`formatValue`	`(value: number) => string` Formats the readout and aria-valuetext.	None
`color`	`NeonColor` Palette name or hex for the needle, arc and readout.	inherited
`size`	`"sm" \| "md" \| "lg"` 160, 224 or 288px across.	`"md"`

The root has role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext (the formatted value and unit).
The dial itself is hidden from screen readers; the meter's value is the single source of truth.
The needle, arc and readout are driven by a spring outside React rendering. Under reduced motion they jump straight to the value.