# Weather Card

Weather card with current conditions, an hourly strip and daily ranges. Pick an hour and the temperature rolls to match, and in its sky style the whole card shifts from day to night.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/weather-card
```

## Import

```tsx
import { WeatherIcon, WeatherCard } from "@/components/ui/weather-card/weather-card";
```

## Variants

- `commute` — Commute: `npx @lumioui/cli add pro/weather-card-commute`
- `forecast` — Forecast: `npx @lumioui/cli add pro/weather-card-forecast`
- `widgets` — Widgets: `npx @lumioui/cli add pro/weather-card-widgets`

## Props

### WeatherIcon

| Prop | Type | Notes |
| --- | --- | --- |
| `condition` | `WeatherCondition` | — |
| `night?` | `boolean` | — |
| `size?` | `number` | Square size in pt. Default 28. |
| `onSky?` | `boolean` | Colours tuned for the sky tone (white cloud). Default false. |

### WeatherCard

| Prop | Type | Notes |
| --- | --- | --- |
| `location` | `string` | — |
| `temperature` | `number` | Current temperature, °C. |
| `condition` | `WeatherCondition` | — |
| `night?` | `boolean` | — |
| `high?` | `number` | Today's high / low, °C. |
| `low?` | `number` | — |
| `summary?` | `string` | One-line forecast summary — "Rain easing after 4 PM." |
| `unit?` | `"C" | "F"` | Display unit. Values are always passed in °C. Default "C". |
| `hourly?` | `HourlyForecast[]` | — |
| `daily?` | `DailyForecast[]` | — |
| `hourlyMetric?` | `"temp" | "precip"` | What the hourly strip shows. Default "temp". |
| `selectedHour?` | `number` | Controlled selected hour index (-1 = current conditions). |
| `defaultSelectedHour?` | `number` | Uncontrolled initial selected hour. Default -1. |
| `onSelectedHourChange?` | `(index: number) => void` | — |
| `tone?` | `"surface" | "sky"` | "surface" — card on the canvas. "sky" — condition-coloured field with  white type. Default "surface". |
| `layout?` | `"full" | "widget"` | "full" — hero + strips. "widget" — compact home-screen square. Default "full". |
| `onPress?` | `() => void` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/weather-card