NWS Alerts Card

seevee · February 16, 2026, 5:20am

I’ve been developing a card for displaying information from the NWS Alerts custom integration.

This card is display-layer only and does NOT interact directly with the NWS API. The above integration is a hard requirement.

Motivation

I live in an area where fire season, winter weather, and damaging high winds frequently occur simultaneously or in quick succession. I wanted more temporal information about each specific alert available at-a-glance, and the more detailed information clearly delimited to mitigate the dense walls of text that can sometimes accompany these alerts.

Features

Severity-based color coding with animated borders for extreme/severe alerts
Progress bars showing elapsed/remaining time for each alert
Expandable details with description, instructions, and NWS source link
Zone-based alert filtering
Card picker integration (add from HA UI)
Visual editor support (basic configuration, hopefully more to come)

What’s next

Besides more visual polish and deeper support for more weather conditions, I’m unsure of what might come next here. If there is interest, I’m very open to feature requests, bug reports, etc. and I will do my best to be responsive.

Screenshots

seevee · March 3, 2026, 9:44pm

Big Update: Now in HACS Official!

I’m excited to share that the NWS Alerts Card has officially landed in the HACS default repository! You can now find and install it directly through the HACS UI without needing to add a custom URL.

Since the original post (v1.0.0), a lot has changed. Here’s a quick look at the major features added in the journey to v1.8.0:

Visual & Layout Improvements

Official NWS Colors: Added a colorTheme option to switch from severity-based colors to the official NWS hazard-map colors (e.g., Tornado Warnings in Red, Flash Flood in Dark Red).
Compact Layout: A new layout: compact mode for dense dashboards that uses slim, expandable rows to save space.
Smart Contrast: Severity badges now use WCAG luminance checking to automatically switch between light and dark text based on the background color—no more invisible labels in light mode!

Better Time Intelligence

Relative Timing: Progress bars and details now show relative time (e.g., “starts in 45m” or “expires in 2h”) alongside absolute timestamps.
Server-Synced Time: Timestamps now sync with your Home Assistant timezone instead of your browser’s, eliminating confusion if you’re viewing your dashboard while traveling.

Enhanced Control

Custom Sorting: You can now sort alerts by Severity, Onset Time, or the default integration order.
UI Configuration: Almost all new features—including sorting, themes, and layouts—are now fully supported in the Visual Card Editor.
Accessibility: Added a toggle for animations and built-in support for the OS prefers-reduced-motion setting.

Under the Hood

Safety: Added HTML sanitization for alert descriptions to keep your dashboard secure.
Availability: The card now displays a clean “unavailable” message if the NWS sensor stops reporting, rather than breaking the UI.

Screenshots

Compact

Details open

Thanks to everyone for the feedback so far! If you run into any issues with the HACS version, feel free to ping me here or on GitHub.

finity · March 22, 2026, 12:28pm

As I mentioned in my PM I’m sorry that I missed this somehow. I’m really surprised since I’m literally on here everyday and since I’m the NWS Alerts guy I’m usually watching for related threads.

I just read this thread and the only thing that stands out so far (and I haven’t had time to try it yet in my own instance) is this:

the issue I see with this is that the integration can use a device tracker to get dynamically moving alerts for a users location instead of just wherever their static HA home zone is located.

It would probably be best to use your browser location instead of a fixed location.

seevee · March 23, 2026, 3:08am

Thank you for the feedback, and for the excellent integration! This card would not exist without your time and hard work.

I had honestly never even considered the device tracking case, thanks for the correction. I’ve added a server/browser config toggle to control this behavior in v2.3.0-alpha.1.

DataheadMarie · March 25, 2026, 1:38pm

This is awesome! Thank you for all your hard work! I’ve got it installed, and it seems to work flawlessly. Is there a way to simply exclude codes, rather than list out just the ones we want? I have a couple that I’d like to ignore if possible.

finity · March 25, 2026, 2:13pm

Just saw and installed the update. It looks really good.

You even caught that I added the NWS Event Codes into the sensor and you now can filter on those.

Good job!

I think I’m going to add your card link to the readme for the integration.

squirtbrnr · March 25, 2026, 7:21pm

I’ve installed this card via HACS, reloaded the page and I’m getting an error.

I get this error on all of my devices. Google Chrome on W10, HA Companion App on iOS and macOS, Firefox on W10. Running HA 2026.1.3 in a container from my NAS.

johnrosshunt · March 25, 2026, 11:06pm

Very nice!

I was wondering if it’s possible to add the alerts Headline to the card? As you can see when you compare the Weather Alerts card to plain markup, events like “Special Weather Statement” are kind of ambiguous without the headline. Thanks!

finity · March 26, 2026, 2:15am

Check the www/community folder and make sure there is a folder in there called “weather_alerts_card” and that it also exists in your lovelace resources.

I added it to my resources manually via yaml so I don’t know where HACS puts it but I think I remember when I let HACS handle the resources for the card on initial install it gave me the same error until I added it manually (as I do for all my other custom cards).

finity · March 26, 2026, 2:19am

Also I just tried playing around with the new “eventCodes:” option and as soon as I add that entry to my config the card just disappears. No errors or anything. It just disappears.

here is the card config I’m using:

- type: custom:weather-alerts-card
  entity: sensor.nws_alerts
  title: NWS Alerts
- type: custom:weather-alerts-card
  entity: sensor.nws_alerts_test
  title: NWS Alerts Test
  eventCodes: FWW

the first one works fine. the second has an existing FWW code in the alert but it doesn’t show up.

but as soon as I remove the “eventCodes: FWW” line it shows up again.

seevee · March 26, 2026, 3:57am

I’ve added this feature as a separate form field in the latest alpha version (v2.5.0-alpha.1). Give it a try and let me know what you think!

seevee · March 26, 2026, 4:01am

I think this might be an artifact of the eventCodes structure, it’s probably expecting a list instead. Try:

type: custom:weather-alerts-card
entity: sensor.nws_alerts_test
eventCodes:
  - FWW

seevee · March 26, 2026, 4:03am

I can’t believe I totally forgot to display this. Gonna make an issue to track this and try a few things out tomorrow. Thanks for the feature request!

EDIT: feat: display alert headlines on the card · Issue #74 · seevee/weather_alerts_card · GitHub now tracking this feature. Feel free to add detail!

EDIT 2: Implemented in v2.5.0-alpha.2, let me know what you think!

seevee · March 26, 2026, 4:12am

Following on from finity’s advice - this is almost definitely a resource loading issue.

Check Resources — Go to Settings → Dashboards → three-dot menu → Resources and
confirm there’s an entry pointing to
/hacsfiles/weather_alerts_card/weather-alerts-card.js (type: JavaScript Module)
If no entry exists, add it manually
Hard refresh the browser (Ctrl+Shift+R / Cmd+Shift+R)

Here’s the entry that HACS made for me, for reference:

squirtbrnr · March 26, 2026, 12:23pm

Yes the resource entry is there. And yes I did a hard refresh of my browsers. It still was giving me the configuration error.

I just updated to v2.4.0 and now the card is appearing at least on the HA Companion App on iOS. ~~It’ll be a couple hours before I can check the browsers on W10.~~

EDIT: The card is appearing correctly now on all browsers and devices without needing to hard refresh after updating to v2.4.0

airbornetrooper82573 · March 26, 2026, 12:30pm

What would I need to enter to make this a conditional card? I don’t need a card displayed 24/7 if it just says No Active alerts. I only want it to display if there is an alert.

airbornetrooper82573 · March 26, 2026, 1:00pm

I think I figured it out…

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.nws_alerts_alerts
    above: 0
card:
  type: custom:weather-alerts-card
  entity: sensor.nws_alerts_last_update

squirtbrnr · March 26, 2026, 1:30pm

the visibility attribute also works:

type: custom:weather-alerts-card
entity: sensor.nws_alerts_zone_id
title: Weather Alerts
eventCodes:
  - TOR
  - SVR
visibility:
  - condition: numeric_state
    entity: sensor.nws_alerts_zone_id
    above: 0

finity · March 26, 2026, 2:09pm

Yeah, that was it. I think that’s the only thing I didn’t try.

coolhand · March 26, 2026, 10:39pm

Great work on this project @seevee ! Very professional, wish I found this a long time ago