Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProConcentric progress rings or a 270 degree gauge in theme colors with animated fills, a legend and a center slot.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
rings | ProgressRing[] | - | One ring per item, outermost first. |
size | number | 176 | Diameter in pixels. |
thickness | number | 14 | Ring thickness in pixels. |
gap | number | 5 | Space between rings in pixels. |
sweep | number | 360 | Degrees the rings cover. 270 makes a gauge with the opening at the bottom. |
legend | boolean | true | Show a legend with each ring's name and value. |
duration | number | 1.1 | Seconds the rings take to fill. |
children | ReactNode | - | Content in the middle. Defaults to the first ring's percentage. |
Also accepts all <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | What this ring measures, such as "Move". |
value | number | - | Current value. |
max | number | 100 | Value that fills the ring. |
tone | "primary" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "destructive" | next chart color | Ring color. |
display | string | the percentage | Text shown for the value in the legend, such as "420 kcal". |