Gauges & Charts
Progress Ring
Circular progress with an icon or value in the center — tier progress and the finance net ring.
Source captures·from the SEED early-access trailer
Tier progress
Clockwise from the top, with an icon in the middle.
Tier 5City
Tier Progress80%
Finance net
A full ring frames a label and value.
Money in Money out
90
Net+9
Tones
30%
45%
60%
75%
90%
Sizes
65%
API
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | 0–100. |
| size | number | 56 | Diameter in px. |
| thickness | number | 5 | Stroke width in px. |
| tone | "green" | "blue" | "white" | "orange" | "red" | "green" | |
| label | string | — | Accessible name. |
| children | ReactNode | — | Centered content. |