Components
Gauge
Compact SVG gauge showing a single value as an arc, semicircle, or linear bar.
Gauge is a lightweight, dependency-free SVG dial for a single value — handy
for KPI tiles and dashboards showing things like CPU or memory usage. Pass a
value (clamped between min/max, default 0–100) and pick a variant:
arc, semi, or linear. Set size, a label, thresholds to switch colour
as the value crosses stops, or formatValue to add a unit. Unlike GaugeChart
it renders inline SVG, so no chart canvas or explicit height is needed.
Example
Preview
import { Gauge } from '@officina/ui';
<Gauge value={72} label="CPU" size={140} />
<Gauge value={58} variant="semi" label="Memory" size={140} />;API
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current value to display. |
| formatValue | (value: number) => string | — | Format the displayed value (e.g. add a unit). |
| label | string | — | Caption shown with the value. |
| max | number | 100 | Upper bound of the scale. Defaults to 100. |
| min | number | 0 | Lower bound of the scale. Defaults to 0. |
| size | number | 160 | Diameter (arc/semi) or width (linear) in pixels. |
| thresholds | { value: number; color: string; }[] | — | Threshold stops — color switches when value crosses. Sorted ascending. |
| trackColor | string | var(--color-bg-muted) | Colour of the unfilled track. |
| variant | enum | arc | Visual style: arc (270° dial), semi (180° half circle), linear (horizontal bar). |