# Activity rings

> Concentric progress rings like a fitness watch, overlapping past 100%.

Component · Pro · https://lodeui.com/components/activity-rings

## When to use

- Daily goals: fitness, habits, quotas, OKRs.

## When not to use

- More than four measures: use progress bars.

## Installation

```bash
npx shadcn@latest add @lode/activity-rings
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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.

## Related

- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.