## Air Quality (S—310)

An air quality card: AQI on a banded gauge, the main pollutant, an hourly strip, and advice that changes with the level.

- URL: https://sundaeui.dev/components/air-quality
- 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/air-quality.json`
- Tags: weather, aqi, air-quality, pollution, health, gauge

The gauge is a segmented arc with the six US AQI bands; the needle points at the current value and the band name is spelled out. Pollutant chips show PM2.5, ozone and others.
The hourly strip is a row of bars; tapping an hour moves the gauge to that forecast and updates the advice line.

### Usage

```tsx
import { AirQuality } from '@/components/sundae/air-quality'

<AirQuality />
```

### Props

- `hours` (`{ t: string; aqi: number }[]`, required): Hourly values, first is now.
- `pollutants` (`{ name: string; value: number; unit: string }[]`): Readings.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Weather apps, outdoor activity planners, health dashboards.

### When not to use

- Regulatory reporting: show raw concentrations.

### Accessibility

- The gauge is a meter with the band name in its value text.
- Hours are buttons; the selected one is pressed.
- Reduced motion removes the movement and keeps every state change.