Activity ringsPro
Concentric progress rings like a fitness watch, overlapping past 100%.
Move
486/400 kcal
Exercise
24/30 min
Stand
9/12 hrs
When to use
- Daily goals: fitness, habits, quotas, OKRs.
When not to use
- More than four measures: use progress bars.
Installation
Usage
Import it from @/components/ui/activity-rings after installing.
example.tsx
import { ActivityRings } from "@/components/ui/activity-rings";
<ActivityRings rings={[{ label: "Move", value: 486, goal: 400, color: "#f43f5e", unit: "kcal" }]} />API reference
ActivityRings
Concentric rings with an optional legend.
| Prop | Type | Default | Description |
|---|---|---|---|
| rings | { label; value; goal; color; unit? }[] | – | Outermost first. |
| size / thickness | number | 180 / 16 | Dimensions in px. |
| legend | boolean | true | Values beside the rings. |
Accessibility
- The SVG is labelled with every ring's value and goal; the legend repeats them as text.
Motion
- Rings sweep in one after another; past 100% a second lap overlaps with a shadow.
Responsive behavior
- The legend wraps below on narrow screens.
Performance
- Two circles per ring.
Notes for AI
- Rings beyond the available radius are skipped; increase size for more rings.
This page as Markdown, for assistants and coding agents:
/components/activity-rings/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt