Weather card
The reference generative widget: current conditions, an hourly strip and a week of ranges on one shared scale, like a thermometer laid flat.
On this page
Now, the next eight hours and a week of ranges on one shared scale.
Installation
Usage
import { WeatherCard } from "@/components/ui/chatcn/weather-card"
const part = message.parts.find((p) => p.type === "tool-get_weather")
<WeatherCard {...part?.output} loading={part?.state !== "output-available"} />Examples
Loading and error
A skeleton in the final shape and a failed lookup with retry.
Props
| Prop | Type | Notes |
|---|---|---|
location, updated | string | |
temp, high, low, feelsLike | number | Degrees in unit |
unit | "C" | "F" | Default C |
condition | WeatherCondition | clear, clear-night, partly-cloudy, cloudy, rain, storm, snow, wind, fog |
humidity, wind | number, string | |
hourly | { time, temp, condition?, precip? }[] | Precipitation shows from 30% |
daily | { day, high, low, condition?, precip? }[] | |
loading, streaming, error, onRetry |
Accessibility
- The temperature reads in words (21 degrees Celsius). Each day reads its condition, low and high; the range bars are hidden from screen readers.
Motion
- The condition icon swaps with a 150 ms blur crossfade when it changes. Nothing else moves.