A circular meter for quotas, usage and progress: an SVG ring with rounded caps that fills from empty and eases to each new reading, whole or split into segments with gaps, in the foreground color, or colored by any thresholds you pass (e.g. warning past 80%, danger past 95%), with the value and unit in the middle or your own content. An indeterminate mode turns an arc round the track for work of unknown length. It is a real meter (or progressbar while indeterminate) with its value spelled out for screen readers. Three track tones and three sizes.
The import and the props worth knowing about, in one place.
import { MeterRing } from "@/components/beste/component/meter-ring";
<MeterRing value={84} label="Storage used" unit="GB" />
// Twelve segments, custom thresholds, a bigger ring
<MeterRing
value={9}
max={12}
label="Tracks mastered"
segments={12}
gap={2.5} // percent of the ring between segments
thresholds={[{ from: 12, status: "success" }]}
size="lg" // "sm" | "default" | "lg"
tone="outline" // "muted" (default) | "outline" | "ghost"
/>
// Work of unknown length
<MeterRing indeterminate label="Uploading stems" />Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The reading. Ignored while `indeterminate`. |
min | number | — | |
max | number | — | |
label | string | — | What is measured, under the ring and in the accessible name. |
unit | string | — | Unit written after the value in the middle, e.g. "GB". |
formatValue | (value: number) => string | — | Writes the value in the middle. Defaults to a rounded number. |
thresholds | MeterThreshold[] | — | Statuses by reading; the last one reached colors the ring. |
segments | number | — | Splits the ring into this many segments. 0 keeps it whole. |
gap | number | — | Space between segments, as a percent of the ring. |
indeterminate | boolean | — | An unknown amount of work: an arc turns round the track. |
children | React.ReactNode | — | Replaces the value in the middle. |
size | "sm" | "default" | "lg" | — | |
tone | "muted" | "outline" | "ghost" | — | |
className | string | — |