## Bullet KPIs (S—297)

KPIs as bullet charts: actual bar, target tick and qualitative bands, with a period switch and pace for the month.

- URL: https://sundaeui.dev/components/bullet-kpis
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/bullet-kpis.json`
- Tags: dashboard, bullet-chart, goals, kpi, targets, metrics

Each row is a bullet chart: the background bands mark poor, fair and good; the solid bar is the actual value; a tall tick marks the target.
Switching period re-animates the bars. Month-to-date rows show whether you are on pace for the target.

### Usage

```tsx
import { BulletKpis } from '@/components/sundae/bullet-kpis'

<BulletKpis />
```

### Props

- `rows` (`{ name: string; unit?: string; target: number; max: number; values: Record<string, number> }[]`, required): Metrics.
- `periods` (`string[]`, required): Period keys.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Executive dashboards, team goal tracking.

### When not to use

- Trends over time: use a line chart.

### Accessibility

- Each bullet is a meter with value, target and band in text.
- The period switch is a radiogroup.
- Reduced motion removes the movement and keeps every state change.