Activity Gauge

Concentric SVG progress rings for comparing a few percentages at a glance, with an optional centre slot.

tsx

1import { ActivityGauge } from "@pestoui/core"

Rings & centre slot

Rings paint outermost first. Anything passed as children sits in the innermost opening.

78%Resolved

showLegend prints a dot, label and rounded percentage per ring, and moves the reading out of the SVG label.

A single thick ring makes a compact dial; thickness and gap default off size.

42%

88%

Prop	Type	Default	Description
rings	{ value: number; tone?: "info" \| "success" \| "warning" \| "destructive"; label?: string }[]	—	One arc per entry, outermost first. `value` is 0–100 and is clamped.
size	number	160	Outer diameter in px.
thickness	number	max(6, size / 14)	Stroke width of each ring in px.
gap	number	max(2, thickness * 0.4)	Space between concentric rings in px.
showLegend	boolean	false	Render a dot / label / percentage list under the rings.
children	ReactNode	—	Centre slot, inset to the innermost ring's opening — usually a total.

Pesto UI · 117 documented components