# Activity Rings

One to three concentric goal rings that fill in a quick cascade and lap again past 100%. Closing a ring makes it glow brightly before settling, as a small reward. Room in the centre for a figure.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/activity-rings
```

## Import

```tsx
import { ActivityRings } from "@/components/ui/activity-rings/activity-rings";
```

## Variants

- `daily` — Daily rings: `npx @lumioui/cli add pro/activity-rings-daily`
- `habit` — Habit week: `npx @lumioui/cli add pro/activity-rings-habit`
- `sharing` — Friends: `npx @lumioui/cli add pro/activity-rings-sharing`
- `workout` — Workout complete: `npx @lumioui/cli add pro/activity-rings-workout`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `rings` | `ActivityRing[]` | One to three rings, outermost first. Extra rings are ignored. |
| `size?` | `number` | Square size in pt. Default 200. |
| `strokeWidth?` | `number` | Ring thickness. Default ~11% of size. |
| `gap?` | `number` | Space between rings. Default scales with the stroke. |
| `animate?` | `boolean` | Fill on mount and glide between values. Default true. |
| `delay?` | `number` | Extra delay before the first ring fills — stagger a row of rings. |
| `haptics?` | `boolean` | Haptic when a ring closes. Default true. |
| `onRingClose?` | `(index: number, ring: ActivityRing) => void` | A ring crossed its goal (fires after the fill lands). |
| `onRingResolve?` | `(index: number, ring: ActivityRing) => void` | A closed ring has held its moment (~690ms after `onRingClose`) — resolve captions here. |
| `rewardLight?` | `boolean` | Brighten a pool of the closing ring's light behind the stack. Turn it  off for small rings in rows and lists. Default true. |
| `children?` | `React.ReactNode` | Centre slot — a figure, an icon. Hidden from screen readers (the root label covers it). |
| `accessibilityLabel?` | `string` | Screen-reader label. Default reads every ring. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/activity-rings