https://github.com/seevee/weather_alerts_card
Weather alerts dashboard card with severity indicators and progress timelines
https://github.com/seevee/weather_alerts_card
bom custom-card dwd frontend-only hacs home-assistant lovelace meteoalarm nws pirateweather weather
Last synced: about 2 months ago
JSON representation
Weather alerts dashboard card with severity indicators and progress timelines
- Host: GitHub
- URL: https://github.com/seevee/weather_alerts_card
- Owner: seevee
- License: mit
- Created: 2026-02-15T23:05:15.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-17T18:49:27.000Z (about 2 months ago)
- Last Synced: 2026-04-17T19:19:26.716Z (about 2 months ago)
- Topics: bom, custom-card, dwd, frontend-only, hacs, home-assistant, lovelace, meteoalarm, nws, pirateweather, weather
- Language: TypeScript
- Homepage:
- Size: 15.1 MB
- Stars: 43
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Weather Alerts Card
A custom Home Assistant Lovelace card for displaying weather alerts with severity indicators, progress bars, and expandable details. Supports NWS (US), BoM (Australia), MeteoAlarm (Europe), DWD (Germany), and PirateWeather.
[](https://raw.githubusercontent.com/seevee/weather_alerts_card/main/img/hero-light.png)
## Features
- **Multi-provider** — NWS (US), BoM (Australia), MeteoAlarm (Europe), DWD (Germany), and PirateWeather with auto-detection
- **Color themes** — severity-based (default), NWS official event colors, or MeteoAlarm awareness level colors
- **Time progress bars** — elapsed/remaining time with relative and absolute timestamps
- **Alert headlines** — contextual subtitle from provider data, with optional redundancy filtering
- **Expandable details** — sanitized description, instructions, and source link
- **BoM phase badges** — New, Updated, Renewed lifecycle indicators
- **Compact layout** — collapsed single-row alerts with progress bars that expand on tap
- **Zone filtering** — show only alerts for specific zones
- **Sort order** — default, onset time, or severity
- **Severity threshold** — minimum severity to display
- **Localized UI** — English, French, Spanish, Italian, and German; auto-detected from Home Assistant locale
- **Visual config** — no YAML editing required
## Themes
[](https://raw.githubusercontent.com/seevee/weather_alerts_card/main/img/themes-light.png)
## Quick Start
1. Install a weather alerts integration for your region (see [Supported Providers](#supported-providers))
2. Install this card via HACS: search "Weather Alerts Card"
3. Add to your dashboard and select your alert entity
## Installation
### HACS (recommended)
[](https://my.home-assistant.io/redirect/hacs_repository/?owner=seevee&repository=weather_alerts_card)
Then click the Download button, and click Reload when prompted.
### Manual
1. Download `weather-alerts-card.js` from the [latest release](../../releases/latest)
2. Copy to `config/www/weather-alerts-card.js`
3. Add as resource: **Settings → Dashboards → Resources** → URL: `/local/weather-alerts-card.js`, Type: JavaScript Module
## Configuration
| Option | Default | Description |
|--------|---------|-------------|
| `entity` | *(required)* | Alert sensor entity |
| `entities` | — | Additional alert entities to merge (e.g. DWD current + advance) |
| `provider` | auto-detect | `'nws'`, `'bom'`, `'meteoalarm'`, `'dwd'`, `'pirateweather'` |
| `title` | — | Card header title |
| `zones` | — | Zone codes to filter (NWS zones or BoM `area_id`) |
| `sortOrder` | `'default'` | `'default'`, `'onset'`, `'severity'` |
| `minSeverity` | `'all'` | `'all'`, `'minor'`, `'moderate'`, `'severe'`, `'extreme'` |
| `colorTheme` | `'severity'` | `'severity'`, `'nws'`, `'meteoalarm'` |
| `eventCodes` | — | Event codes to include, e.g. `['SVR', 'TOR']` (NWS) or `['31', '95']` (DWD) |
| `excludeEventCodes` | — | Event codes to exclude, e.g. `['SCY']` (NWS) or `['22']` (DWD) |
| `timezone` | `'server'` | `'server'` or `'browser'` (client's local time) |
| `deduplicateHeadlines` | `true` | Suppress headlines that repeat the event name |
| `deduplicate` | `true` | Collapse matching alerts across zones and providers |
| `animations` | system | `true`, `false`, or respect `prefers-reduced-motion` |
| `showDetails` | `true` | Show the expandable detail panel (hides entire "Read Details" section when `false`) |
| `expandDetails` | `false` | Always show details inline without a toggle (ideal for wall-mounted displays) |
| `showProvider` | `false` | Show provider label (e.g., NWS) above event title |
| `showMetadata` | `true` | Show issued/onset/expires/area grid in detail panel |
| `showDescription` | `true` | Show description text in detail panel |
| `showInstructions` | `true` | Show instructions text in detail panel |
| `showSourceLink` | `true` | Show "Open Source" link (`false` for kiosk mode) |
| `hideExpired` | `true` | Hide expired alerts (set `false` to show them dimmed) |
| `hideNoAlerts` | `false` | Hide the "No active alerts" banner when there are no alerts |
| `fontSize` | `'default'` | `'small'`, `'default'`, `'large'`, `'x-large'` — scales text and icons |
| `reformatText` | `true` | Strip hard line wraps from alert text (NWS 69-char teletype breaks) while preserving paragraph breaks |
| `layout` | `'default'` | `'default'` or `'compact'` |
Examples
**Basic**
```yaml
type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
```
**With title and zone filtering**
```yaml
type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
title: Weather Alerts
zones:
- COC059
- COZ039
```
**NWS official colors, compact, sorted by severity**
```yaml
type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
colorTheme: nws
layout: compact
sortOrder: severity
```
**NWS filtered to specific event types, browser timezone**
```yaml
type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
eventCodes:
- TOR
- SVR
timezone: browser
```
**European MeteoAlarm warnings with awareness colors**
```yaml
type: custom:weather-alerts-card
entity: binary_sensor.meteoalarm
colorTheme: meteoalarm
```
**Australian BoM warnings**
```yaml
type: custom:weather-alerts-card
entity: sensor.sydney_warnings
provider: bom
```
**DWD (Germany)**
```yaml
type: custom:weather-alerts-card
entity: sensor.dwd_weather_warnings_hamburg_current
```
**DWD current + advance warnings merged**
```yaml
type: custom:weather-alerts-card
entity: sensor.dwd_weather_warnings_current
entities:
- sensor.dwd_weather_warnings_advance
```
**PirateWeather alerts**
```yaml
type: custom:weather-alerts-card
entity: sensor.pirateweather_alerts
```
## Supported Providers
The card auto-detects the provider from entity attributes. Any integration that produces a compatible data shape will work.
| Provider | Region | Tested integrations |
|----------|--------|---------------------|
| NWS | US | [finity69x2/nws_alerts](https://github.com/finity69x2/nws_alerts) |
| BoM | Australia | [bremor/bureau_of_meteorology](https://github.com/bremor/bureau_of_meteorology), [safepay/ha_bom_australia](https://github.com/safepay/ha_bom_australia) |
| MeteoAlarm | Europe | Built-in [meteoalarm](https://www.home-assistant.io/integrations/meteoalarm/) |
| DWD | Germany | Built-in [dwd_weather_warnings](https://www.home-assistant.io/integrations/dwd_weather_warnings/) |
| PirateWeather | Global | [Pirate-Weather/pirate-weather-ha](https://github.com/Pirate-Weather/pirate-weather-ha) |
## Data Fidelity
Severity and certainty badges are always localized to your configured language. When a value was inferred by the card's adapter logic (rather than provided directly by the alert source), it is rendered with italic text and a tilde prefix (`~Moderate`) so you can tell at a glance which badges reflect actual provider data.
| Provider | Severity | Certainty |
|----------|----------|-----------|
| NWS | Raw (from `Severity` field) | Raw (from `Certainty` field) |
| BoM | Inferred (parsed from title/type/group) | Absent |
| MeteoAlarm | Raw (from `awareness_level` or `severity`) | Raw (from `certainty`) |
| DWD | Raw (from integer `level`) | Absent |
| PirateWeather | Raw (from `severity` field) | Absent |
## Development
```bash
npm install
npm run build # bundle → dist/weather-alerts-card.js
npm run watch # bundle with file watching
npm run lint # TypeScript type-check
```
Migrating from v1.x
The card was renamed from "NWS Alerts Card" to "Weather Alerts Card" in v2.0 to reflect multi-provider support. **Your existing dashboards will continue to work.** The old `custom:nws-alerts-card` element name is still supported but deprecated. To migrate:
1. Update your dashboard YAML: change `type: custom:nws-alerts-card` to `type: custom:weather-alerts-card`
2. Update your resource URL:
- **HACS users:** HACS updates the resource path automatically — no action needed.
- **Manual install:** In Settings → Dashboards → Resources, change `/local/nws-alerts-card.js` to `/local/weather-alerts-card.js`
3. The old names will be removed in v3.
---
**Resources:** [Home Assistant Community thread](https://community.home-assistant.io/t/nws-alerts-card)