5 Must-have custom cards to transform your Home Assistant dashboard

Home Assistant is more than just a hub for your smart home gear. It also fosters a thriving hub for innovation because no setup is truly personal right from the get-go. I’m yet to see two Home Assistant dashboards that are exactly alike, and with good reason. While the default Home Assistant interface is powerful, it can sometimes feel a bit generic. This is where users can leverage cards to tweak the interface to their needs. The official documentation for this smart home standard lists several card types supported by default.

However, there’s also sufficient room for tinkering with nested card types and complex combinations that remind me of when I played around with Zooper Widget for Android to create do-it-all full-screen widgets. Home Assistant’s dashboard is conducive with custom cards that create a stunning command center for your smart home. You can start with the Home Assistant Community Store (HACS) that houses custom cards created by the community, or just use the visual editor or YAML to modify it and suit your needs. Here are 5 of the latest and greatest custom cards to spruce up your Home Assistant dashboard so it truly stands out.

5

Todo Swipe Card

One place to check them all off the list

The Todo Swipe Card is a fantastic solution for managing multiple to-do lists without cluttering up your dashboard. It allows you to group related lists together and navigate between them with a smooth swipe gesture, making it perfect for organizing shopping lists, project tasks, or any other to-do lists you might have. I found that it excels in its ability to consolidate lists from multiple pages, allowing you to stop selecting favorites from several concurrent lists you may need.

The creator is well aware of the default list management baked into Home Assistant, but this custom card is highly customizable, with options to show or hide various elements like the add button, completed tasks, and pagination dots. It also supports background images on individual lists for a personal touch. I love how well this card uses a visual editor, so you can configure the cards easily without messing with YAML code. You can add or remove to-do lists, adjust spacing, and customize the look and feel of the card with just a few clicks. Its extensive theming is managed through 25 custom CSS variables.

The Todo Swipe Card is their solution to this problem, and it’s a testament to the power of the Home Assistant community. It’s important to note that this card requires card-mod integration to be installed and working properly, as it uses internal card-mod styling for its core functionality. The developer’s YAML config code follows. It will generate a four-card list which you can use as a starting point for toying with variables without getting overwhelmed.

type: custom:todo-swipe-card

show_completed_menu: true

delete_confirmation: true

todo.albert_heijn: /local/images/background_image/albert_heijn.png

todo.jumbo: /local/images/background_image/jumbo.png

todo.ikea: /local/images/background_image/ikea.png

todo.hornbach: /local/images/background_image/hornbach.png

todo.action: /local/images/background_image/action.png

4

Circular Gauges

Pushing it to the limit

The Modern Circular Gauge Card is a beautiful and versatile card that can be used to display a variety of information, from sensor data to device states, so long as a progress bar-like UI suffices. It features a modern, circular design with support for sections, a needle, and color segments. As such, creating gauges for monitoring parameters like temperature, humidity, and battery levels is standard fare, but you can extend this to display the status of your devices. The card also supports a secondary info field for supplemental data.

Like the Todo list card, this one has a decked-out visual editor that makes configuration of all the various options easy. Support for the min, max, and secondary info fields is templatized for additional convenience, but the developer notes you’ll need to edit the configuration.yaml file to configure those templates, accessible only on a handful of options.

The result is a beautiful and functional card that caters to your needs without adding more numbers, unaided by pictorially represented data that’s usually easier to digest. The creator of this custom card also sought a modern-looking gauge card that was similar to the built-in gauge card but more feature-rich and stylish in terms of design. You can install Modern Circular Gauge Card from HACS or use the GitHub repo YAML bits for the lovelace section below. Lest I forget, one great thing about this card is that you can use it as a custom card or as a header badge.

– url: /local/modern-circular-gauge.js

3

Status Card

As the name suggests, the Status Card is a simple yet powerful custom card that consolidates the status of your entities for a clean display. It smartly groups all the entities by domain or by device_class, to only show you the ones that are currently active. This way, you can just glance at the Home Assistant dashboard and instantly know what is running at the moment. This way you can create something resembling a secondary header.

In my opinion, the best feature of this custom card is how easy the setup is — you simply assign your entities to an area, and the card auto-generates everything else to display your data. The card also features a pop-up view to control your entities directly from the dashboard. Needless to say, elaborate customization options are baked in, including support for light and dark modes, as well as a GUI editor, so you aren’t enslaved by lines of code.

If you’re overcome by a wave of déjà vu seeing this, it’s because the creator drew inspiration from the immensely popular Dwain’s Dashboard project for Home Assistant. The core idea was to provide a similar “status” view but with more flexibility and customization options. They have done a fantastic job, and the Status Card is now one of the most popular new custom cards in the Home Assistant community. Here is an example of how to configure the Status Card in YAML, but it is also available on HACS:

2

Weather station

Never miss your phone again

The community of Home Assistant enthusiasts never ceases to amaze with new creations, and among my newest finds is this helpful weather info card created using a combination of several default card types for your dashboard. The simple-weather-card provides a clean and minimalist display of the current weather conditions, while the hourly-weather card provides a detailed forecast for the next few hours. The combination of these two cards creates a complete weather solution that is both visually appealing and highly functional.

The creator explains that you can use card-mod to customize the background color, add a blur effect, and even add spacing between the cards. You can also use a vertical-stack-in-card to combine the two cards into a single, seamless display even though it will take up more screen real estate. Together, you’ll need to get a vertical stack going in the card, with a simple weather card taking up one part of the stack and the hourly card taking up the other. Then you can add a clock and moon phase indicator using Card Mod. Lastly, add one more parameter if you want background transparency, like the macOS Liquid Glass theme.

backdrop-filter: blur(5px)

Otherwise, the standard YAML edit you’ll need to perform follows. This isn’t on HACS yet, but you can follow the creator’s updates in this Reddit thread.

type: custom:vertical-stack-in-card

– type: custom:simple-weather-card

entity: weather.tomorrow_io_home_daily

– temp: sensor.govee_rear_patio_temp_rounded

– type: custom:hourly-weather

entity: weather.tomorrow_io_home_daily

show_precipitation_amounts: false

show_precipitation_probability: false

– type: custom:clock-weather-card

entity: weather.tomorrow_io_home_daily

date_pattern: ccc, d.MM.yy

1

Bubble Card

The sheer grandeur

This custom card tops my list of recent favorites because it is right up there among full custom dashboard replacements in its capabilities. This rather involved custom card, created by Reddit user /u/Clooooos, took two years to develop from start to finish. The result is a unique “bubble” design that is both modern and eye-catching. The card is highly customizable, with sliders, buttons, and separators.

This Home Assistant card allows users to create anything from a simple button to a complex interactive interface with pop-ups designed from scratch. The designer maintains their focus on simplicity and accessibility, and the latest update to version 3, released just a couple of weeks ago, adds a new feature the creator calls Module System, comprising a Module Store and Module Editor, all for this custom card. Together, they bring global style controls across Bubble Cards, so your settings for one card apply to the style of the others. As with all other Home Assistant components, the community is welcome to design Modules for the Bubble Card.

The creator thoughtfully includes a fully featured and integrated editor, so toying with YAML isn’t needed. It also simplifies the process of sharing your custom card settings with other Home Assistant users you know. The potential is limitless, and this is one of the biggest updates Bubble Card has received in recent times. If you’re using it, perhaps it’s worth visiting the GitHub page to get the update.

Take the leap of faith

Custom Home Assistant cards may be all that’s standing between you and a beautiful home automation dashboard. By leveraging the power of HACS and the creativity of the Home Assistant community, you can transform your dashboard from a simple control panel into a personalized and visually stunning command center for your smart home. Whether you’re looking for a simple, elegant display or a complex, interactive interface, there’s a custom card out there for you.

These five custom cards I mention are merely the tip of the iceberg. With a little exploration and understanding, you can easily install custom cards for Home Assistant and even make your own using the YAML editor. Dive in, explore the world of custom cards, and unlock the full potential of your Home Assistant dashboard.