thordursk / gauge-ui

# gauge-ui
Composable SVG gauge primitives for React, distributed as a shadcn registry. Design a gauge in the studio, copy the code, and own the source in your project. No runtime dependencies beyond React and the shadcn `cn` helper.
## Install
 [code] 
Or register the namespace once in `components.json` and install by name:
 [code] 
 [code] 
The files land in `components/gauge/`.
## Usage
 [code] 
`Gauge` owns the domain and geometry. Every child reads value, angles and radius from context and positions itself against the reference radius, so parts can be added, removed or reordered freely. Angles are measured clockwise from six o'clock.
| Primitive | Draws |
| --- | --- |
| `GaugeTrack` | Background arc across the whole sweep |
| `GaugeArc` | Filled arc anchored at `from`, growing either way to the current value or `to`; `reverse` grows it back from the end, `wrap` carries it past the seam of a closed ring |
| `GaugeStack` | The value arc split into parts that sweep as one, by `weight` shares or fixed `to` cutoffs |
| `GaugeZones` | Coloured bands between zone cutoffs |
| `GaugeTicks` | Evenly spaced tick marks |
| `GaugeTickFill` | Ticks as the fill: those between the ends of the value or range are lit, the rest dim, or with `mode="nearest"` only the tick at each end. Lit and dim colours can be functions of the value |
| `GaugeMarks` | Marks at arbitrary values, or at the `count` equal cuts of the domain |
| `GaugeTickLabels` | Numeric, compass or clock labels along the arc |
| `GaugeNeedle` | Line, pointer, compass or arrow needle |
| `GaugeHub` | Centre cap for the needle |
| `GaugeDot` | A disc riding the arc at the current value, with an optional `halo` to stand it off a band |
| `GaugeTooltip` | An HTML tooltip shown on hover, pinned to the value, the pointer or a fixed spot on the dial: the value with a label and unit by default, or any content you give it |
| `GaugeValue` | Formatted current value |
| `GaugeText` | Free text at any position, for units and titles |
| `GaugeInset` | A whole gauge nested inside another, at its own scale |
| `GaugeControl` | Wraps a gauge as an accessible slider: drag round the ring, turn the face with `knob`, or use the keyboard to set its value |
`Gauge` and `GaugeInset` also take `wrap`, which treats the domain as circular so a heading animates the shortest way round, and `rotate`, which turns the whole scale under a fixed pointer the way a compass card turns.
## Ranges
Pass a `[from, to]` pair as `value` to show a span of the domain instead of a single reading: a forecast's low and high, a target band, a sleep window. Both ends animate with the gauge's `transition`.
 [code] 
- `GaugeArc` and `GaugeStack` fill between the two ends rather than from `min`.
- `GaugeDot` and `GaugeNeedle` follow the far end. Use `end="from"` to put one on the start.
- `GaugeValue` and `GaugeTooltip` show both ends, joined by `separator` (default `–`), with `format` applied to each. The tooltip points at the middle of the ran