Open source weather widgets for the web
Breezy Weather-inspired components built with React, TypeScript, and Tailwind. Live data from Open-Meteo. Drop them into any Next.js or React app.
Built with the xl-ecosystem
These widgets stay current automatically. When Breezy Weather ships an update, our pipeline detects changes, analyzes impact, and creates targeted pull requests -- no manual tracking required.
Upstream tracking
Live fork status and upstream mapping. Our pipeline watches the source repo and keeps our TypeScript port in sync.
| Category | Source (Kotlin) | Target (TypeScript) |
|---|---|---|
| Models | 8 Kotlin data classes | TypeScript interfaces |
| API Sources | Open-Meteo provider | REST client + normalization |
| Theme | 24 weather gradients | CSS gradient map |
When Breezy Weather releases a new version, our pipeline automatically detects changes, analyzes impact, and creates targeted PRs.
Get started
Add individual widgets to your project with the CLI. Each component is a standalone package with zero cross-dependencies.
npx @xl-weather/cli add header-card
header-cardCurrent conditions with dynamic gradient background
hourly-trend24-hour temperature and precipitation trend
daily-forecast7-day forecast with crossing temperature curves
sun-moonSunrise/sunset times and moon phase
windWind speed, direction, and gusts
precipitationDaytime precipitation amount
air-qualityAQI gauge with color-coded label
pollenGrass, tree, and weed pollen levels
humidityHumidity percentage and dew point
uv-indexUV index with color dot scale
visibilityVisibility distance and clarity label
pressureBarometric pressure gauge with trend
settingsSettings shell with section navigation