Gauge
Semicircular gauge meter with animated needle, arc fill, and tick marks. SVG-based with Framer Motion draw-in animation. Supports threshold warning and five color themes.
1import { Gauge } from "@mdrbx/nerv-ui";
Default
Colors
With Threshold
When the value exceeds the threshold, the gauge automatically turns red.
Ring Variant
The ring variant replaces the needle with a thick gradient arc. Use gradientFrom and gradientTo to customise the sweep colors.
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current gauge value |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| label | string | — | Label above gauge |
| unit | string | "%" | Value suffix |
| color | "cyan" | "green" | "orange" | "red" | "magenta" | "cyan" | Color theme |
| size | number | 160 | Gauge size in pixels |
| showTicks | boolean | true | Show tick marks |
| threshold | number | — | Value above which gauge turns red |
| variant | "needle" | "ring" | "needle" | Display variant — classic needle or thick gradient arc ring |
| gradientFrom | string | "#FF00FF" | Gradient start color (ring variant) |
| gradientTo | string | "#FF9900" | Gradient end color (ring variant) |
| className | string | "" | Additional CSS classes |
When label is provided, hovering or focusing the gauge surface lifts the
component and opens the NERV tooltip overlay with the label and current
value. The same label is exposed through the accessible name for keyboard and
assistive technology users.
The gauge uses a 240° arc sweep (from 7 o'clock to 5 o'clock) with 13 tick marks. The needle and value arc animate on mount with staggered Framer Motion transitions.