Home Assistant dashboard: Useful HACS custom elements
Here you find Home Assistant (Lovelace) dashboard custom elements that are not available by default, but that you can add to your dashboard.
Table of Contents
- Swipe Navigation
- auto-entities
- Mushroom
- card-mod 3 (lovelace-card-mod)
- slider-entity-row
- multiple-entity-row
- template-entity-row
- Atomic Calendar Revive
- Birthday Reminder Card
- Clock Weather Card
- Lovelace animated weather card
- Neerslag App
Swipe Navigation
Swipe left or right to switch to the side Lovelace dashboard on your mobile device.
Repo: https://github.com/zanna-37/hass-swipe-navigation
Install this integration, via this button, into your own Home Assistant instance.
auto-entities
Dynamically show entities based on a variety of sorting and filtering options.
Example: Show all temperature entities, sorted by temperature, rounded to no decimals and colored based on the temperature.
auto-entities example: temperatures rounded, sorted and colored
Repo: https://github.com/thomasloven/lovelace-auto-entities
Install this integration, via this button, into your own Home Assistant instance.
I have a dedicated page with examples and a dashboard with chores based on this custom element.
# Source code by vdbrink.github.io
# Dashboard card code
type: custom:auto-entities
card:
type: entities
show_header_toggle: false
state_color: false
title: Temperature
filter:
include:
- entity_id: sensor.temp*.temperature
options:
type: custom:template-entity-row
state: |
{{ states(config.entity)|round(0)}} °C
style: |
:host {
--paper-item-icon-color:
{% set level = states(config.entity)|round(0) %}
{% if level >= 26 %} firebrick
{% elif level >= 25 %} orange
{% elif level < 10 %} blue
{% else %} var(--primary-text-color)
{% endif %}
;
}
show_empty: false
sort:
method: state
reverse: true
numeric: true
Mushroom
With the mushroom element, you can add small elements on top of your dashboard.
It can be only a colored icon, or also show a state value.
You can also show them only for a specific state.
For example: rain expected, a CO2 level that is too high, a wrong temperature, or nice weather to sit outside.
Examples:
Mushroom examples
mushroom CO2 indicator
mushroom home indicator
Repo: https://github.com/piitaya/lovelace-mushroom
Install this integration, via this button, into your own Home Assistant instance.
My dedicated page about the Mushroom element »
card-mod 3 (lovelace-card-mod)
Add custom CSS styling to your dashboard.
Example: Colored icon based on entity state.
colored icon based on the entity state
I have a styling page with multiple examples based on this custom element.
Repo: https://github.com/thomasloven/lovelace-card-mod
Install this integration, via this button, into your own Home Assistant instance.
The entity used here is based on the KNMI weather alarm scraper.
# Source code by vdbrink.github.io
# Dashboard card code
type: entities
entities:
- entity: sensor.knmi_weercode
tap_action:
action: url
url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('sensor.knmi_weercode', 'Code groen') %}
#008000;
{% elif is_state('sensor.knmi_weercode', 'Code rood') %}
#CC0000;
{% elif is_state('sensor.knmi_weercode', 'Code geel') %}
#ffd700;
{% elif is_state('sensor.knmi_weercode', 'Code oranje') %}
#ffa500;
{% else %}
#44739e
{% endif %}
}
slider-entity-row
Add a slider for brightness, volume, cover position, speed, number, etc.
slider-entity-row example
Repo: https://github.com/thomasloven/lovelace-slider-entity-row
Install this integration, via this button, into your own Home Assistant instance.
# Source code by vdbrink.github.io
# Dashboard card code
type: custom:slider-entity-row
entity: light.group_light1
toggle: true
multiple-entity-row
Place multiple entities compactly on a single row.
Repo: https://github.com/benct/lovelace-multiple-entity-row
Install this integration, via this button, into your own Home Assistant instance.
template-entity-row
Customize a single row for multiple entities.
In this example, a rounded temperature with an icon that is colored based on the temperature.
template-entity-row example: rounded temperature with a colored icon
Repo: https://github.com/thomasloven/lovelace-template-entity-row
Install this integration, via this button, into your own Home Assistant instance.
# Source code by vdbrink.github.io
# Dashboard card code
type: entities
entities:
- entity: sensor.temp1_temperature
type: custom:template-entity-row
state: |
{{ states(config.entity)|round(0)}} °C
style: |
:host {
--paper-item-icon-color:
{% set level = states(config.entity)|round(0) %}
{% if level >= 30 %} firebrick
{% elif level >= 25 %} orange
{% elif level < 10 %} blue
{% else %} var(--primary-text-color)
{% endif %}
;
}
.state {
color:
{% set level = states(config.entity)|round(0) %}
{% if level >= 30 %} firebrick
{% elif level >= 25 %} orange
{% elif level < 10 %} blue
{% else %} var(--primary-text-color)
{% endif %}
}
Atomic Calendar Revive
A Google calendar overview.
Atomic Calendar Revive overview
Repo: https://github.com/totaldebug/atomic-calendar-revive#about-the-project
Install this integration, via this button, into your own Home Assistant instance.
Birthday Reminder Card
A birthday and wedding day overview.
Birthday Reminder Card
Repo: https://github.com/erlsta/homeassistant-lovelace-birthday-reminder-card
Install this integration, via this button, into your own Home Assistant instance.
To add your own dates, edit the birthday-reminder-card.js file.
You can find it in the www folder of your Home Assistant installation.
# Source code by vdbrink.github.io
# Dashboard card code
type: custom:birthday-card
title: "Birthdays"
numberofdays: 30
Clock Weather Card
A clock and weather forecast in one card.
Clock Weather Card
Repo: https://github.com/pkissling/clock-weather-card
Install this integration, via this button, into your own Home Assistant instance.
You can also minimize the card so it only shows the weather forecast.
Clock Weather Card minimized to the weather forecast
# Source code by vdbrink.github.io
# Dashboard card code
type: custom:clock-weather-card
entity: weather.forecast_home
forecast_days: 5
locale: nl
time_format: 24
hide_clock: true
date_pattern: ''
hide_today_section: true
hide_forecast_section: false
See also another presentation with the weather per hour >
BeardedTinker made a YouTube video about this card.
Lovelace animated weather card
Current weather conditions and the predictions for the coming days.
Lovelace animated weather card
Repo: https://github.com/bramkragten/weather-card
Install this integration, via this button, into your own Home Assistant instance.
# Source code by vdbrink.github.io
# Dashboard card code
type: custom:weather-card
entity: weather.yourweatherentity
current: true
details: false
forecast: true
hourly_forecast: false
number_of_forecasts: 5
Neerslag App
Show expected rain from the Dutch sources Buienalarm and Buienradar.
Neerslag App
Repo: https://github.com/aex351/home-assistant-neerslag-app
Install this integration, via this button, into your own Home Assistant instance.
# Source code by vdbrink.github.io
# Dashboard card code
type: custom:neerslag-card
title: Neerslag
entities:
- sensor.neerslag_buienalarm_regen_data
- sensor.neerslag_buienradar_regen_data
Related articles
See also my other Home Assistant tips and tricks.
Dynamically show entities based on sorting and filtering options.
Add small elements on top of your dashboard.
^^ Top | Homepage | Best Buy Tips | Automation Ideas | Blog posts | Sitemap