Five new and popular Home Assistant Lovelace custom cards (2024)

Five new and popular Home Assistant Lovelace custom cards (1)

In an earlier piece, we delved into the most sought-after custom cards for the Home Assistant Dashboard. While those cards continue to dominate GitHub's star rankings, a fresh batch is swiftly catching up. This article shines a spotlight on five rising stars in the Home Assistant Dashboard's custom cards cosmos.

These custom cards, all launched within the past year or so, may already be familiar to some. To ensure their relevance, only cards that are under active development and bug-free have been included. These cards are all available for installation via the Home Assistant Community Store.

  • Vacuum Card: The digital aide for your automated cleaner
  • Powering up: Battery State Card for the Home Assistant Dashboard
  • ApexCharts Card: Fancy graphs for your Home Assistant Dashboard
  • Scheduler Card: Sometimes timed automations rule
  • Alarmo: Integrating the manual alarm control panel

Vacuum Card: The digital aide for your automated cleaner

The Vacuum Card lives up to its name, catering specifically to robot vacuum cleaners. This custom card for the Home Assistant Dashboard offers up-to-date information about the vacuum's status and allows you to issue commands without any additional buttons. While I can't speak from personal experience, given its 381 GitHub stars, it seems to have found favour within the community.

The card itself supports a broad range of popular robot vacuums, including models from Roborock, Xiaomi, iRobot, and Ecovacs Robotics. If you're curious about your machine's compatibility, a comprehensive list of supported models is available in the repository. Given that the Vacuum Card relies on standard robot vacuum features such as pause, start, stop, and return_to_base, most models integrated with Home Assistant should work with this card. The card also allows you to replace the default image with a PNG or SVG file of your model. To add a touch of flair, you can enable an animation, or opt for a more subtle look with the compact card, which hides the image entirely. If available, a map display is also an option.

The Vacuum Card for Home Assistant can show various information based on the robot vacuum's state. For instance, when the vacuum is docked, you can view details about the filter and brushes. During cleaning, the card can show the cleaning area and duration. Interactive icons at the bottom of the card trigger predefined commands. This feature is handy for initiating manual zoned cleaning with a simple click.

Powering up: Battery State Card for the Home Assistant Dashboard

The Battery State Card is an innovative addition to the Home Assistant Dashboard, claiming the mantle from the seemingly dormant Lovelace Battery Entity card, which regrettably hasn't been consigned to the GitHub archives. This custom card is a paragon of adaptability, and in my tenure as a Home Assistant user, few have come close in terms of flexibility and personalisation.

Amongst its many virtues, the Battery State Card's collapsibility feature is a clear standout, allowing for a streamlined and uncluttered Home Assistant Dashboard. Yet, it retains the capacity to offer a comprehensive view of all battery states in a single card, a classic case of having your cake and eating it too. The card's utility extends beyond simply providing a snapshot of the battery status of your wireless home automation gadgets. It can also display readings from any sensor, and supports automatic sorting and colour gradients for dynamic icons.

The example above showcases its capabilities, with the list limited to the top three entries when collapsed, sorted to put devices with the lowest battery percentage in pole position, and adorned with dynamically coloured icons. The ability to display secondary information and configure a charging indication adds further layers of detail.

Tired of the manual labour involved in adding devices to the Battery State Card? Fear not. With the filter setup, automation takes over, adding any entity that includes the string battery_level or battery to the card. Now that's a power move.

ApexCharts Card: Fancy graphs for your Home Assistant Dashboard

For me and many other Home Assistant community members, the ApexCharts Card has replaced the still popular Lovelace Mini Graph Card. This custom card uses the ApexCharts.js library and gives the user the option to customize just about every aspect of the chart. You might have even unknowingly come across graphs built using this open-source library used on websites, as it is very popular. Using the ApexCharts Card you can create radial bar, pie, donut, line, and scatter charts.

What sets the ApexCharts Card apart from the Lovelace Mini Graph Card are its available graphs and customizability. With the newer option, you are no longer limited to just line and bar graphs. You might be asking yourself why one would use charts in the Home Assistant Dashboard. We all want a beautiful dashboard with cards displaying useful, and sometimes not so useful, data, right? For example, you could integrate your Unraid NAS and display all hard drives using a single radial bar chart.

Scheduler Card: Sometimes timed automations rule

The final two Home Assistant custom cards, I am presenting in this article, are more complex than the previous three presented so far. The Scheduler card relies on the Scheduler custom component. For you, that means you will need to install the custom component using HACS before you try the Scheduler Card. The Scheduler custom component is the brains of the operation, and it controls your existing devices based on time.

The Scheduler Card gives the Scheduler custom component an easy-to-use interface. You can easily configure lights to turn off or on, covers to go up or down, switches to toggle, and climate adjustments using this card. The actions can be set to occur on a daily or weekly basis. There is also the option of executing the action only on weekdays, or you can completely customize the schedule.

Alarmo: Integrating the manual alarm control panel

Alarmo is an integration for the manual alarm control panel domain in Home Assistant. While the custom card is part of Alarmo, it is only one third of the full package. A custom component and a separate panel make up for the rest.

The Alarmo custom component controls the states of the alarm panel entities in Home Assistant, while the Alarmo panel is a GUI for configuring the settings of the alarm. The Alarmo custom card for the Home Assistant Dashboard allows you to arm or disarm the alarm. The custom card itself, is probably the least interesting part of the Alarmo package, with its functionality boiling down to an option to arm or disarm the alarm. Alarmo is, in fact, also compatible with the official Alarm Panel card.

Five new and popular Home Assistant Lovelace custom cards (14)

About Liam Alexander Colman

Liam Alexander Colman is an experienced Home Assistant user who has been utilizing the platform for a variety of projects over an extended period. His journey began with a Raspberry Pi, which quickly grew to three Raspberry Pis and eventually a full-fledged server. Liam's current operating system of choice is Unraid, with Home Assistant comfortably running in a Docker container.
With a deep understanding of the intricacies of Home Assistant, Liam has an impressive setup, consisting of various Zigbee devices, and seamless integrations with existing products such as his Android TV box. For those interested in learning more about Liam's experience with Home Assistant, he shares his insights on how he first started using the platform and his subsequent journey.
Five new and popular Home Assistant Lovelace custom cards (2024)

FAQs

How do I manually add a custom card to Home Assistant? ›

Adding custom cards to the dashboard

To add the custom card to your Home Assistant web interface, go to the Dashboard, click on the menu icon on the top right, click Edit Dashboard and then Add card. Some custom cards have a visual editor to add and edit the card easily.

Why can't i see custom cards in Home Assistant? ›

This is perfectly normal. The customi cards will not show up to be picked, but need to be entered through the manual card option (or overwriting in edit mode of any other card).

How do I add a Lovelace card? ›

Installation of custom-cards
  1. Copy the folder of the custom-card you want to use and paste it in the folder minimalist-templates . ...
  2. Check, if the custom-card has specific requirements, like installed lovelace-cards or integrations from Home Assistant activated!

How do I add more cards to Home Assistant? ›

To add the Button card to your user interface, click the menu (three dots at the top right of the screen) and then Edit Dashboard. Click the Add Card button in the bottom right corner and select from the card picker. All options for this card can be configured via the user interface.

How do I add a custom card to my Home Assistant dashboard? ›

To start, go to the Home Assistant Overview page, click on the three dots at the top right of the screen and select 'Edit Dashboard'. Then click on the blue '+ Add Card' icon at the bottom right and select a card to add.

How to make a custom card set? ›

Designing Your Own Playing Card Deck In 4 Simple Steps
  1. 1 Choose Your Design Software. Choose a design program such as Adobe Photoshop or Illustrator. ...
  2. 2 Create Your Template. Select the pre-drawn suits in the program. ...
  3. 3 Consider Uploading Photos. ...
  4. 4 Design The Backs Of Your Cards.
Feb 24, 2021

How do custom cards work? ›

It's just like a normal check or debit card, except you get to choose the photo or image that appears on the card.

How do I add HACS cards to Home Assistant? ›

Go to Developer Tools and click Restart to reboot the Home Assistant Server. After the reboot, go to Settings > Devices & Services and click the ADD INTEGRATION button. Search for HACS and click on it. Check all items and click Submit.

Where is the custom components folder Home Assistant? ›

/srv/homeassistant/lib/python3. 5/site-packages/homeassistant/components/config/custom_components/google_keep/. that is the same place as you configuration. You will need to create the dir custom_components if this is your first custom_component.

What is Lovelace card? ›

Lovelace Button Card

The Button Card is a more customizable alternative to standard Home Assistant offerings, compatible with any toggleable entity. With six available actions on tap, hold, or double-click, custom layouts, adjustable aspect ratios, and an array of icons, it offers plenty of room for personalization.

What is Lovelace in Home Assistant? ›

Lovelace is the user interface that has been packaged with Home Assistant and has been the standard for several versions now. It allows me to create custom pages to better organize my Home Assistant front end. This can be applied across users, platforms, and even on mobile devices.

What is the minimum SD card for Home Assistant? ›

32GB is the minimum recommended size. You will need to explore your own system to determine where space has gone. Using df -h in the SSH add-on console to you can quickly check to see if you have space available.

What can I add to Home Assistant? ›

Below is a list of nine popular integrations you can add to your Home Assistant.
  • Weather Integration. ...
  • Z-Wave Integration. ...
  • HomeKit Integration. ...
  • Google Assistant Integration. ...
  • MQTT Integration. ...
  • Philips Hue Integration. ...
  • Sonos Integration. ...
  • Google Nest Integration.
Jun 5, 2023

How do I add a generic device to Home Assistant? ›

Configuration
  1. Browse to your Home Assistant instance.
  2. Go to Settings > Devices & Services.
  3. In the bottom right corner, select the Add Integration button.
  4. From the list, select Generic Camera.
  5. Follow the instructions on screen to complete the setup.

How to add the custom repository to the Home Assistant supervisor's add on store? ›

A user can add a repository by going to the Supervisor panel in Home Assistant, clicking on the store icon in the top right, copy/paste the URL of your repository into the repository textarea and click on Save.

How do I add RFLink to Home Assistant? ›

Adding devices Automatically

When pressing the button on the physical remote, RFLink detects the signal and the device should be added automatically to Home Assistant. RFLink Switches and RFLink Binary Sensors cannot be added automatically.

How do I add input numbers to Home Assistant? ›

The preferred way to configure an input number is via the user interface at Settings > Devices & Services > Helpers. Click the add button and then choose the Number option. To be able to add Helpers via the user interface you should have default_config: in your configuration.

Top Articles
Latest Posts
Article information

Author: Manual Maggio

Last Updated:

Views: 6712

Rating: 4.9 / 5 (69 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Manual Maggio

Birthday: 1998-01-20

Address: 359 Kelvin Stream, Lake Eldonview, MT 33517-1242

Phone: +577037762465

Job: Product Hospitality Supervisor

Hobby: Gardening, Web surfing, Video gaming, Amateur radio, Flag Football, Reading, Table tennis

Introduction: My name is Manual Maggio, I am a thankful, tender, adventurous, delightful, fantastic, proud, graceful person who loves writing and wants to share my knowledge and understanding with you.