Weather Widget
An animated weather card with sun-glow, raindrop, drifting-cloud, and snowflake scenes, day/night colors, and a week forecast
Renders the matching animated scene for each condition — rotating rays on a sunny day, falling raindrops in the rain, drifting cloud layers when overcast, swaying snowflakes when it snows — paired with a day/night gradient background and a moon and starry sky on a clear night. The body is a large temperature figure with feels-like and humidity information, and a mini 5-day forecast row sits along the bottom.
Loading preview…
npx shadcn@latest add https://webberui.com/r/weather-widget.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<WeatherWidget />
Installation
npx shadcn@latest add https://webberui.com/r/weather-widget.jsonOr, once registries are configured in components.json, install it as @webberui/weather-widget.
Usage
import { WeatherWidget } from "@/components/ui/weather-widget";
<WeatherWidget
night={false}
data={{
location: "Taipei",
condition: "sunny", // "sunny" | "rainy" | "cloudy" | "snowy"
temperature: 31,
feelsLike: 34,
humidity: 62,
forecast: [
{ label: "Wed", condition: "sunny", high: 32, low: 26 },
{ label: "Thu", condition: "sunny", high: 33, low: 27 },
{ label: "Fri", condition: "cloudy", high: 31, low: 26 },
{ label: "Sat", condition: "rainy", high: 29, low: 25 },
{ label: "Sun", condition: "sunny", high: 32, low: 26 },
],
}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | WeatherData | — | The weather data: location, condition, temperature, feelsLike, humidity, and forecast (a 5-day forecast) |
data.forecast[] | ForecastDay[] | — | Each entry has label (the weekday), condition, and high / low (the high and low temperatures); at most the first 5 are used |
night | boolean | false | Night mode: switches to a night-sky gradient, and a sunny condition shows the moon and stars instead |
className | string | — | Forwarded to the card's outer container |
Accessibility
- The card uses
role="group"with a completearia-labelthat announces the location, day or night, the weather condition, the temperature, the feels-like value, and the humidity - The animated scenes (rays, raindrops, cloud layers, snowflakes, stars) are all decorative content, hidden from assistive technology with
aria-hidden - Each cell in the forecast row carries a full
sr-onlysentence (weekday, condition, high and low), so nothing depends on recognizing an icon - When the user has "reduce motion" enabled at the system level, the rotation and falling animations are disabled in favour of a static scene, with raindrops and snowflakes shown at fixed positions
- The positions of raindrops, drifting clouds, and snowflakes come from a pseudo-random generator seeded by index, so SSR and client output agree and no hydration error occurs