Gauge
Circular KPI dials driven by pure SVG. Perfect for spotlighting percentage progress, system health, or SLA compliance inside stats tiles and overview dashboards.
Core Usage
Pass a value and optional label. Gauges normalise automatically against the max you provide (default 100).
At-a-glance
72%
CPU
45%
Memory
73%
Throughput
<.gauge value={72} label="CPU" />
<.gauge value={88} max={120} label="Throughput" />
Variants & Sizes
Use semantic variants out of the box and choose a size that fits your card or tile layout.
Semantic tones
Status variants
82%
Healthy
56%
At Risk
34%
Critical
Size presets
64%
Small
64%
Medium
64%
Large
Custom Colors
Override the stroke with any brand colour or gradient token via the new
color
attribute.
On-brand hues
92%
Uptime
48%
Expansion
75%
Engagement
<.gauge value={92} color="#6366f1" label="Uptime" />
<.gauge value={48} color="#0ea5e9" label="Expansion" />
Props
Keep the API simple and expressive. Variants cover common semantic states; use
color
for bespoke brand palettes.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | float | — |
Current measurement rendered as a percentage of max.
|
| max | float | 100.0 | Upper bound used to compute the percentage. |
| label | string | nil | nil | Optional caption rendered beneath the percentage. |
| variant | :primary | :success | :warning | :error | :primary | Preset stroke colour for semantic states. |
| color | string | nil | nil | Custom hex / CSS colour that overrides the variant palette. |
| size | :sm | :md | :lg | :md | Adjusts the SVG radius and stroke width. |
| class | string | "" | Append classes to the wrapper for layout tweaks. |