KQ-544 · ACTIVITY/RINGS
Activity Rings
Three nested progress rings, each filling to its value on glide one cascade step apart so they read as three measurements arriving rather than one animation. A ring past its goal keeps going as a darker second lap over the first, and the centre figure rolls its digits to whichever ring is being read. Hovering or focusing a legend row isolates its ring and dims the others; arrows walk the rows and Enter pins the isolation.
KQ-544 · ACTIVITY/RINGS
Coldbrook · today
Move 92% · Exercise 73% · Stand 67%
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/activity-rings
Props
- rings
- { id: string; label: string; value: number; goal: number; color: string }[]
- default —
- Outer to inner, up to three.
- size
- number
- default 200
- Diameter in px; the figure scales down with its container.
- thickness
- number
- default 14
- Ring stroke width in px.
- format
- (value: number) => string
- default en-US thousands
- Formats values and goals in the legend.
- aria-label
- string
- default "Activity rings"
- Names the figure; a sentence per ring is appended to it.
| Prop | Type | Default | Description |
|---|---|---|---|
| rings | { id: string; label: string; value: number; goal: number; color: string }[] | — | Outer to inner, up to three. |
| size | number | 200 | Diameter in px; the figure scales down with its container. |
| thickness | number | 14 | Ring stroke width in px. |
| format | (value: number) => string | en-US thousands | Formats values and goals in the legend. |
| aria-label | string | "Activity rings" | Names the figure; a sentence per ring is appended to it. |