If you’re a Home Assistant user, you’re probably familiar with the standard interface for controlling your smart home devices. But have you heard of the Lovelace UI? It’s a powerful, customizable interface that allows you to fully customize the look and feel of your Home Assistant interface, as well as add new functionality. In this post, we’ll provide an overview of the Lovelace UI and show you how to get started with it. Whether you’re a seasoned Home Assistant pro or new to the platform, you’ll find something useful in this post. So let’s dive in!
Prerequisites
You will need to have Home Assistant installed to use the Lovelace UI, but that is about it. You may also want to have some sensors set up so that you can add those on to the UI if you are looking to track that information.
Getting Started
The first step I recommend when getting started with the Lovelace UI is to create a new Dashboard. That way you don’t ruin anything that comes with the standard Overview board and you will be able to start with a blank slate.
When you navigate to the Settings tab, you will find the Dashboards menu. Once this menu is open, you can click the button in the bottom right corner to “Add New Dashboard”.
You will need a title, an icon, and a URL, but they can be whatever you would like. For this example, I will be creating one called Test.
Your New Dashboard
The new dashboard you created can now be accessed from the sidebar if you left that option selected, otherwise navigate to the dashboard menu in the settings and select “Open” on your new dashboard. The dashboard will automatically be populated with all of your entities, so the first step will be to clear that out. Clicking on the 3 dots on the top right corner, you will select “Edit Dashboard” which will load a new prompt.
Toggle on “Start with an empty dashboard” and then press “Take Control” to get to your blank dashboard.
You now have a blank dashboard to start. I will now walk you through the basic design I use for my Lovelace UI dashboards. I typically use Home Assistant from my phone, so I like to try and optimize my layout to fit vertically on my phone. To start that, I always use a new card called the vertical stack card.
You add new cards within the vertical stack card so that they follow the vertical pattern. This nested card is common for Lovelace UI but it can get a bit tricky. Just to show how it gets tricky, I will add the first card within the vertical stack card, which will be the horizontal stack card.
Now that I have the horizontal stack, I will add cards to this stack. I like to have a quick view of who is in or out of the house, so I will add three family members to this horizontal stack. I like to use button cards for this since it creates a larger card and gives me the ability to use different click and hold actions.
It’s starting to look a little messy now, but the button card shows the entity that tracks me as a person (person.sean) and I changed the name so that it wasn’t lowercase, and I toggled on the “Show State” toggle so that I can see at a quick glance where I am. I will leave the tap action and hold action alone for now, but later I will use that to navigate to different views. I will duplicate this two times to get the three people I want to track.
There you have the button cards in the horizontal stack. The horizontal stack is now complete, so I can move up a level and add my next card to the vertical stack which will give me a card below the people buttons. This is where I will add an entities card to get a quick view of any sensors we want.
We have now added the “Entities” card to the vertical stack on this dashboard. You will notice that it is the #2 card in this stack since the #1 card is the person buttons. You can adjust where this sit by using the arrows near the top of the card. They are where we want them right now, so we will leave it. I have added the entities card and added entities that I want to see at a quick glance. This card is helpful since it is compact and easy to use. You can also select the pencil next to each entity and adjust the name and a few other features in case you want to adjust anything.
In Conclusion
This was a simple primer on how to set up your first Lovelace dashboard. Trying out each card that is available to see what it does, is a good way to determine which cards you want to add to your Lovelace UI dashboard. In other articles we will discuss more in-depth about cards and also how to add touch and hold actions.