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.

Top 10 Home Assistant Dashboard Themes: Part 1; Part 2;

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.

#Configuration Example

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


sun-card home assistant smarthomescene screenshot
sun-card

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.

  • Name: sun-card
  • Developer: AitorDB
  • Features:
    • Sun Tracking
    • Azimuth
    • Elevation
    • requires sun integration
    • localization

#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 and Banggood Affiliate Programs. These programs are designed to provide means for websites to earn revenue by linking affiliate products through their content. We are compensated for referring traffic and business to these websites, incurring no additional cost to you as a consumer.
SmartHomeScene © 2023 All rights reserved Privacy Policy | Contact Us | Support


Amazon
Patreon
AliExpress
Buymeacoffee
Banggood
Ko-Fi

SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program, AliExpress Portals Affiliate Program and Banggood Affiliate Programs. These programs are designed to provide means for websites to earn revenue by linking affiliate products through their content. We are compensated for referring traffic and business to these websites, incurring no additional cost to you as a consumer.
SmartHomeScene © 2023 All rights reserved
Privacy Policy | Contact Us | Support

6 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top