Animated (on load)
Set animated — value and fill ease from animateFrom (defaults to min) when mounted or when value changes.
Storage used0
0%
Threshold bands (bar)
Usage — low (15)15
Usage — medium (35)35
Usage — high (78)78
Threshold bands (ring)
12%
42%
88%
Animated + thresholds
0%
Shape: bar (default)
Storage used72
API quota12
Shape: arc (speedometer)
Semicircle gauge — similar to a car dashboard. Label sits below; value centers in the dial when showValue is set.
68%
4200
Shape: ring (donut)
72%
9
Compared to Progress
Linear Meter for quotas; Progress for task completion. Radial meters suit dashboards.
Meter65
Progress65%
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| shape | Optional | "bar" | "arc" | "ring" | bar | Linear bar, semicircle arc, or donut ring. |
| size | Optional | "sm" | "md" | "lg" | md | Radial gauge scale (arc / ring). |
| value / min / max | Optional | number | — | Current value and range. |
| animated | Optional | boolean | false | Ease value and fill on mount / value change. |
| animateFrom / animateDuration | Optional | number | — | Animation start value (default min) and duration ms. |
| thresholds | Optional | MeterThreshold[] | — | Value bands with tone (danger | warning | success | info) or custom color. |
| showValue | Optional | boolean | — | Header (bar) or center (arc / ring). |
| valueSuffix | Optional | string | — | Optional center suffix, e.g. "%". |