# Activity rings

Daily goals as tick rings that sweep, count up, and trace a second lap past 100%.

- ID: `activity-rings`
- Import: `animui/activity-rings`
- Category: Special
- Runtime exports: `ActivityRings`
- Declaration: `types/pro/activity-rings.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: progress, gauge, usage-meter, activity-heatmap, animated-counter

```tsx
import { ActivityRings } from 'animui/activity-rings';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info activity-rings` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface ActivityRingsProps {
  metrics: { id: string; label: string; unit: string; goal: number; color?: string }[];
  days: { id: string; label: string; short: string; values: Record<string, number> }[];
  day?: string;
  defaultDay?: string;
  onDayChange?: (day: string) => void;
  focused?: string | null;
  defaultFocused?: string | null;
  onFocusedChange?: (metric: string | null) => void;
  onRingClose?: (metric: string, day: string) => void;
  label?: string;
  className?: string;
}

export declare const ActivityRings: ComponentType<ActivityRingsProps>;

export default ActivityRings;
```