## Weather Forecast (S—218)

A forecast card: scrub the hourly temperature line to read any hour, or switch to a 7-day list with high/low range bars.

- URL: https://sundaeui.dev/components/weather-forecast
- 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/weather-forecast.json`
- Tags: weather, hourly, temperature, chart, widget, forecast

Hourly view draws temperature as a line; drag or hover to move a cursor and the header shows that hour’s temperature, rain chance and wind.
7-day view lines up each day’s low–high as a bar on a shared scale so warm and cold days read at a glance. °C/°F converts everything.

### Usage

```tsx
import { WeatherForecast } from '@/components/sundae/weather-forecast'

<WeatherForecast />
```

### Props

- `hours` (`{ t: number; rain: number; wind: number; icon: string }[]`, required): Next 24 hours.
- `days` (`{ day: string; lo: number; hi: number; icon: string }[]`, required): 7-day.
- `unit` (`'c' | 'f'`, default `'c'`): Display unit.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Travel, events, outdoor activity apps, dashboards.

### When not to use

- Severe-weather alerts: lead with the warning.

### Accessibility

- The hourly chart is a slider (one step per hour) with full readings in aria-valuetext.
- The 7-day list is a table-like list with highs and lows spelled out.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next hour