Weather Card

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/weather-card

Usage

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

Also exported: WeatherIcon.

Examples

Commute

A transit app's "before you leave" card.

Forecast

The full forecast card on a rain-grey sky field, lit from above.

Widgets

Home-screen widget squares for the cities you follow.

API reference

WeatherIcon

Prop Type Default
condition* WeatherCondition —
night boolean false
size number

Square size in pt. Default 28.

 28
onSky boolean

Colours tuned for the sky tone (white cloud). Default false.

 false

WeatherCard

Prop Type Default
location* string —
temperature* number

Current temperature, °C.

 —
condition* WeatherCondition —
night boolean false
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".

 "C"
hourly HourlyForecast[] —
daily DailyForecast[] —
hourlyMetric "temp" | "precip"

What the hourly strip shows. Default "temp".

 "temp"
selectedHour number

Controlled selected hour index (-1 = current conditions).

 —
defaultSelectedHour number

Uncontrolled initial selected hour. Default -1.

 -1
onSelectedHourChange (index: number) => void —
tone "surface" | "sky"

"surface" — card on the canvas. "sky" — condition-coloured field with white type. Default "surface".

 "surface"
layout "full" | "widget"

"full" — hero + strips. "widget" — compact home-screen square. Default "full".

 "full"
onPress () => void —
className string —