NWS Alerts Card

Share your Projects! Dashboards & Frontend
1

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




4 Likes
2

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.