## OKR Tracker (S—302)

Objectives with key results: progress rolls up from each KR, confidence per KR, and quick check-ins that nudge values.

- URL: https://sundaeui.dev/components/okr-tracker
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/okr-tracker.json`
- Tags: goals, team, progress, okr, planning, key-results

Each objective is a disclosure whose ring is the average of its key results. Key results show current versus target and a confidence level of low, medium or high.
Check-in opens a small stepper on a key result; saving updates the ring and the overall score.

### Usage

```tsx
import { OkrTracker } from '@/components/sundae/okr-tracker'

<OkrTracker />
```

### Props

- `objectives` (`{ id: string; title: string; krs: { id: string; title: string; value: number; target: number; unit?: string; conf: 1 | 2 | 3 }[] }[]`, required): Objectives.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Quarterly planning, team pages, 1:1 notes.

### When not to use

- Task tracking: use a task list.

### Accessibility

- Objectives are disclosure buttons with their progress in the label.
- Each KR has a meter; confidence is text plus a three-step marker.
- Reduced motion removes the movement and keeps every state change.