## Activity Rings (S—055)

Concentric progress rings that draw in on mount and lap past 100% with a second shadowed loop.

- URL: https://sundaeui.dev/components/activity-rings
- Category: Cards & data visualization · Art direction: Expressive
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/activity-rings.json`
- Tags: goals, chart, data, progress, rings, fitness

Three goals in one glance, each with its value and target beside the rings.
Over-achieving draws a second lap on top of the first with a soft shadow, the way fitness apps do.

### Usage

```tsx
import { ActivityRings } from '@/components/sundae/activity-rings'

<ActivityRings rings={[
  { label: 'Move', value: 380, goal: 480, unit: 'kcal', color: '#fb7185' },
  { label: 'Exercise', value: 34, goal: 30, unit: 'min', color: '#a3e635' },
]} />
```

### Props

- `rings` (`Ring[]`, required): Label, value, goal, unit and colour.
- `size` (`number`, default `124`): Diameter, px.
- `title` (`string`, default `'Today'`): Caption.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Goal tracking: fitness, habits, savings, sales targets.

### When not to use

- Comparing values across items: a bar chart is easier to read.

### Accessibility

- The SVG is role="img" with a label listing every ring’s percentage.
- Values are also real text in the caption.
- Reduced motion skips the draw-in.