Data Display
Gauge
Circular progress ring for a single 0–100 percentage; value or custom label in the center.
A circular progress ring for a single 0–100 percentage — GPU utilization, cache hit rate, disk usage. Pure SVG, with the value rendered in the center (or your own label). tone colors the arc from the design tokens; color overrides it. Pair a few of them for a compact hardware dashboard.
Import
tsx
1import { Gauge } from "@yuhuanowo/yunui";Basic
Gauge
72%
Tones and size
Drive the arc color with tone (typically from a threshold) and scale with size / thickness.
Tones
38%
71%
94%
Custom label
Pass any node as label to replace the percentage, or null to hide it.
Label
64%
CACHE
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ariaLabel | string | — | Accessible name, when `label` is a node rather than a string. Radix aside, a `role="progressbar"` with no name announces a bare percentage. |
| className | string | — | |
| color | string | — | Explicit CSS color for the arc, overriding `tone`. |
| counterClockwise | boolean | false | Start the arc from the top and sweep clockwise (default) or counter-clockwise. |
| label | ReactNode | — | Center content. Defaults to the rounded percentage; pass `null` to hide. |
| size | number | 72 | Diameter in px. |
| thickness | number | 6 | Ring thickness in px. |
| tone | "accent" | "success" | "warning" | "error" | "info" | "neutral" | accent | Semantic arc color. Ignored when `color` is set. |
| value* | number | — | Progress, 0–100 (clamped). |