Weather widgets for the open web

Breezy Weather-inspired React components. Live data from Open-Meteo. 24 packages, zero API keys, LGPL-3.0.

Select a city

Rebuilt for React — inspired by Breezy Weather

18 interactive components covering every aspect of weather data. Hover any widget to view its source code.

Forecast

Radar & Satellite

Current Conditions

Astronomy

SunMoonVenusJupiterBackground: astronomical · nautical · civil twilight → blue hr → golden hr → day

Start building in 30 seconds

Add individual widgets with the CLI, or install packages directly. Zero config required.

Install

CLI (recommended)bash

npx @xl-weather/cli add header-card forecast

npmbash

npm install @xl-weather/react @xl-weather/header-card @xl-weather/forecast

Usage

Weather.tsxtsx

import { WeatherProvider } from "@xl-weather/react"
import { HeaderCard } from "@xl-weather/header-card"
import { Forecast } from "@xl-weather/forecast"

const location = {
  latitude: 41.8781,
  longitude: -87.6298,
  timezone: "America/Chicago",
}

export default function Weather() {
  return (
    <WeatherProvider location={location}>
      <HeaderCard config={{ location_name: "Chicago", units: "imperial" }} />
      <Forecast config={{ units: "imperial", days: 7, hours: 24 }} />
    </WeatherProvider>
  )
}

All 24 packages

@xl-weather/header-card

Current conditions with dynamic gradient background

@xl-weather/forecast

Unified hourly + daily + weekly forecast with day-zoom and metric tabs

@xl-weather/hourly-trend

24-hour temperature trend (deprecated — re-exports Forecast)

@xl-weather/daily-forecast

7-day forecast (deprecated — re-exports Forecast)

@xl-weather/wind

Wind speed, direction, and gusts

@xl-weather/precipitation

Daytime precipitation amount

@xl-weather/air-quality

AQI circular gauge with zone coloring

@xl-weather/pollen

Grass, tree, and weed pollen levels

@xl-weather/humidity

Humidity gauge with comfort label and dew point

@xl-weather/uv-index

UV index gauge with WHO color zones

@xl-weather/visibility

Visibility distance and clarity label

@xl-weather/pressure

Pressure gauge with rising/falling trend

@xl-weather/gauge

Universal circular gauge — CV/PV/SP ranges, zone coloring, conditional icons

@xl-weather/sun-arc

Half-dome sun arc with rise/set times and current altitude

@xl-weather/moon-arc

Half-dome moon arc with rise/set times and phase

@xl-weather/moon-phase

Illuminated moon disc with phase name and illumination percentage

@xl-weather/az-el

Azimuth-elevation compass showing sun and moon positions

@xl-weather/golden-hour

24h golden-hour timeline strip with countdown to next window

@xl-weather/planets

Visible planets above the horizon with azimuth and altitude

@xl-weather/altitude-timeline

Hero 24h altitude strip for sun/moon/planets with scrubber + twilight bands

@xl-weather/settings

Settings shell with section navigation

@xl-weather/react

React context provider with caching and refresh

@xl-weather/types

Shared TypeScript interfaces and enums

@xl-weather/theme

Sky gradients, weather icons, theme system, ForecastGrid

@xl-weather/client

Open-Meteo REST client with normalization layer

@xl-weather/cli

Add widgets to your project with npx @xl-weather/cli

Built in the open

We track Breezy Weather releases for inspiration, but xl-weather is an independent React-first library — not a port.

Tracking

breezy-weather/breezy-weather

Latest upstream

Our version

v0.1.75

cef426b

Packages

24 on Gitea npm

18 visual widgets

Upstream sync pipeline

Upstream Watch

xl-events monitors Breezy Weather releases every 6 hours

AI Analysis

Claude Code analyzes Kotlin diffs against our TypeScript mapping files

Auto PR

Per-package branches and PRs created on Gitea with structured change summaries

Build & Test

xl-runner builds affected packages in dependency order, runs 72+ tests

Human Review

Engineer reviews, merges, and the updated packages publish automatically

Multi-provider architecture

  Open-Meteo API ----+
                     |
  NWS API ----------+----> CompositeProvider ----> WeatherProvider (React Context)
                     |            |                        |
  [Future sources] --+     normalization              caching + refresh
                           + fallback               auto-retry on error

Coming soon from KraftWare

EventDetect

Industrial event detection, classification, and response automation. Real-time sensor fusion meets edge AI.

Learn more