Top 10 Home Assistant Weather Cards


This post is a collection of the best weather forecast Lovelace cards for Home Assistant available in the community store (HACS). I will leave some configuration examples showcasing the cards as well as direct HACS links for easy download.

All credit goes to the individual developers who made these awesome custom cards.
Links to their Github profiles will be left in the description, so you can support them with a cup of coffee if you want.

Home Assistant Weather Card

Built-in Weather Card Home Assistant

To start off this list, we must mention the official Home Assistant Weather Card. It offers minimal customization, but it shows the most important weather information which is good enough for most people.

This card does not need to be downloaded, it’s part of the default Home Assistant configuration.

type: weather-forecast
entity: weather.forecast_home
secondary_info_attribute: humidity
show_current: true
show_forecast: true
Code language: YAML (yaml)

Simple Weather Card


simple-weather-card

The Simple Weather Card is developed by kalkih, the same developer who made the awesome mini-graph-card for Home Assistant. It features a very smooth, slick and minimalistic design and will not clutter your dashboard. It is capable of showing important weather information in a very tiny space, making it very useful for mobile phones of wall mounted dashboards.

  • Name: simple-weather-card
  • Developer: kalkih (Karl Kihlström)
  • Features:
    • forecast
    • temperature
    • humidity
    • precipitation
    • wind_speed
    • wind_bearing
    • pressure

#Configuration Example

type: custom:simple-weather-card
entity: weather.forecast_home
name: Home
primary_info:
  - wind_bearing
  - humidity
secondary_info:
  - precipitation
  - precipitation_probability
Code language: YAML (yaml)

Hourly Weather Card


hourly-weather-card

The hourly weather card is used to visualize upcoming weather conditions on a colored horizontal bar. You can change icons with text, add wind direction, speed or humidity under each segment of the bar. An hourly forecast entity is needed for the correct operation of this card, otherwise it would result in an error.

  • Name: hourly-weather-card
  • Developer: decompil3d (Jonathan Keslin)
  • Features:
    • forecast (hourly)
    • temperature
    • humidity
    • precipitation
    • wind_speed
    • wind_bearing
    • rain

#Configuration Example

type: custom:hourly-weather
entity: weather.forecast_home_hourly
icons: true
show_precipitation_amounts: true
show_wind: barb
num_segments: '14'
Code language: YAML (yaml)

Animated Weather Card


Custom Animated Weather Card for Home Assistant
animated-weather-card

This card will seem familiar to many people, because it’s been forked a couple of times in the community. This card displays information in three distinct rows: The current weather icon, the current temperature and title, The details about the current weather, The X day forecast or hourly forecast. Icons are neatly animated and look great on a wall mounted tablet.

  • Name: animated-weather-card
  • Developer: bramkragten (Bram Kragten)
  • Features:
    • forecast (daily)
    • forecast (hourly)
    • temperature
    • humidity
    • precipitation
    • wind_speed
    • wind_bearing
    • rain
    • pressure

#Configuration Example

type: custom:bom-weather-card
title: Weather Card
entity_current_conditions: sensor.amst_icon_descriptor_0
entity_temperature: sensor.amst_temp
entity_forecast_high_temp_1: sensor.amst_temp_max_1
entity_forecast_high_temp_2: sensor.amst_temp_max_2
entity_forecast_icon_1: sensor.amst_icon_descriptor_1
entity_forecast_icon_2: sensor.amst_icon_descriptor_2
entity_forecast_icon_3: sensor.amst_icon_descriptor_3
entity_summary_1: sensor.amst_short_text_1
entity_pos_1: sensor.amst_rain_amount_range_1
entity_pos_2: sensor.amst_rain_amount_range_2
entity_apparent_temp: sensor.amst_temp_feels_like
entity_wind_bearing: sensor.amst_wind_direction
entity_wind_speed: sensor.amst_wind_speed_kilometre
entity_wind_gust: sensor.amst_gust_speed_kilome

Code language: YAML (yaml)

Weather Radar Card


weather-radar-card

This one is slightly different that the other weather cards showcased. It’s uses map tiles of radar data provided by RainViewer to display weather forecast in a graphical overview, resulting in a continuous map which can be seamlessly zoomed/panned. The card comes with 4 styles (light, dark, voyager, satellite) which can be used to adjust it’s looks according to your dashboard.

#Configuration Example

type: 'custom:weather-radar-card'
frame_count: 10
center_latitude: -45.567607
center_longitude: 151.930597
marker_latitude: -23.175328
marker_longitude: 151.653189
show_marker: true
show_range: true
show_zoom: true
show_recenter: true
show_playback: true
zoom_level: 8
Code language: YAML (yaml)

Clock Weather Card


clock-weather-card

One of my favorite cards on this list, the clock weather card which displays the current date, time and weather forecast. It displays daily forecast data with minimum and maximum temperatures in a simple bar, from your main weather integration. OpenWeatherMap is suggested by the dev for this card, as it provides todays weather which this card needs.

#Configuration Example

type: custom:clock-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 5
locale: en-GB
time_format: 24
date_pattern: P
hide_today_section: false
hide_forecast_section: false
Code language: YAML (yaml)

Meteoalarm Card


meteoalarm-card

The Meteoalarm Card is a powerful yet simple custom card to show meteorological warnings card in Home Assistant. It supports most of the core weather integrations as well as custom integrations like MeteoAlarm (EU), Météo-France (France), DWD (Germany), WeatherAlerts (USA) and more. When there are any alerts issued, card will change color to let you know about upcoming dangerous conditions.

  • Name: meteoalarm-card
  • Developer: MrBartusek (Bartosz Dokurno)
  • Features:
    • Meteorological Warnings
    • conditional appearance
    • localization
    • custom integration required

#Configuration Example

type: custom:meteoalarm-card
entities:
  - entity: binary_sensor.meteoalarm
integration: meteoalarm
override_headline: true
Code language: YAML (yaml)

Sun Card (Lovelace-Horizon-Card)


sun-card home assistant smarthomescene screenshot
lovelace-horizon-card

The sun card has been archived and is no longer maintained. An updated fork which works is the lovelace-horizon-card. Links have been changed to the new fork.

Even though it’s not an actual weather forecast card, it’s one of the most beautiful cards on this list. The sun card by dev AitorDB uses the Sun integration to mirror the position of the sun for your location. It can tell you the current elevation, dawn and dusk times as well as Azimuth angle.

#Configuration Example

type: custom:sun-card
darkMode: true
showAzimuth: true
showElevation: true
Code language: YAML (yaml)

Weather Conditions Card


weather-conditions-card

The Weather Conditions Card is the most versatile card on this list. It can range from a simple minimalistic overview of today’s weather, to a full blown weather station showing things like UV index, air quality data, pollen data, alerts and warnings and camera meteogram.

A custom integration feeding more advanced weather data to Home Assistant is needed to fully utilize the capabilities of the Weather Conditions Card. I would recommend this card for actual meteorologists or data obsessed people, as it’s quite a lot of work to set it up properly.

  • Name: weather-conditions-card
  • Developer: r-renato (Renato Rossi)
  • Features:
    • forecast (daily)
    • forecast (hourly)
    • temperature
    • humidity
    • precipitation
    • wind_speed
    • wind_bearing
    • UV Index
    • Air Quality Data
    • pressure
    • pollen data
    • alerts
    • camera meteogram

#Configuration Example

type: custom:ha-card-weather-conditions
name: Weather
language: en
animation: true
weather:
  icons_model: climacell
  current:
    sun: sun.sun
    moon_phase: sensor.moon_phase
    current_conditions: sensor.weather_alert
    temperature: sensor.outside_temp
    feels_like: sensor.feels_like_temp
Code language: YAML (yaml)

Platinum Weather Card


platinum-weather-card

One of the best cards on this list, the Platinum Weather Card is another fork of the original custom animated weather card. It’s very versatile and highly customizable, capable of showing a variety of weather conditions such as temp, humidity, precipitation, UV index and much more. A custom integration is needed to display useful data.

What separates this card from the rest is the fact that it features a built-in UI for editing it’s layout. Other cards on this list also feature an editor, but this one is very complex making it very useful when setting up the card.

  • Name: platinum-weather-card
  • Developer: Makin-Things (Simon)
  • Features:
    • UI configuration
    • forecast (daily)
    • forecast (hourly)
    • temperature
    • humidity
    • precipitation
    • UV index
    • wind_speed
    • wind_bearing
    • fire warning
    • custom entities
    • much more

#Configuration Example

type: custom:platinum-weather-card
card_config_version: 8
entity: weather.forecast_home
entity_forecast_icon: weather.forecast_home
entity_summary: weather.forecast_home_hourly
entity_temperature: weather.forecast_home
option_show_overview_decimals: true
option_show_overview_separator: false
overview_layout: complete
section_order:
  - overview
  - extended
  - slots
  - daily_forecast
show_section_overview: true
text_card_title: Weather
text_card_title_2: Home
Code language: YAML (yaml)

Screenshots

SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program & AliExpress Portals Affiliate Program.
We may earn a small commission on qualifying purchases from these websites, which incurs no additional cost to you.
SmartHomeScene © 2023 All rights reserved
Ko-Fi SmartHomeScene.com

8 thoughts on “Top 10 Home Assistant Weather Cards”

  1. Nice. I’ve added simple-weather-card to my list for my future mobile view redesign, and I think I may give the meteoalarm-card a try for weather alerts on my tablet/kiosk view. Right now for weather alerts there, I’m using a conditional mushroom chip card (it only shows if there’s at least one active alert), that I have navigating to a subview with the full alert info. Seems like I could use that meteoalarm-card to provide more info on the initial view, at least.

    1. Hey Ben,

      That one works best if you pair it with a capable weather alert integration, which would ideally be local to your location.
      Don’t forget to add an automation as well, which would send you a notification for example, on a announce it to your smart speaker.

      Cheers!

      1. Yeah, the ones for the US (National Weather Service related) tend to be by “county” or “zone” (which in my small state happen to be identical). The card supports the integration I’ve never been able to get work (weatheralerts) so I asked about adding support for NWS Alerts. Same information, just the second one actually works for me. It’s what the existing conditional card is based on.

        Hadn’t thought about an automation. If I could filter it for severe alerts only, that might make a viable trigger, but I’d be less inclined to be woken at 3 am to find out it’s going to snow.

Comments are closed.