Building the Perfect Lovelace Dashboard in Home Assistant

What Is Lovelace?

Lovelace is the name for Home Assistant's frontend dashboard system. It's what you see when you open Home Assistant in a browser or on your phone — the grid of cards showing your lights, sensors, cameras, and controls. Despite the technical-sounding name, Lovelace is actually remarkably approachable once you understand its building blocks.

The system is highly modular: dashboards are made of views (pages/tabs), views contain cards (individual UI elements), and cards display data from your entities (devices and sensors). With the addition of custom cards from HACS, the possibilities for customization are nearly unlimited.

In 2025, Lovelace received significant updates including improved section views, responsive grid layouts, and better mobile support — making it better than ever for building dashboards that look great on both a wall tablet and a phone screen.

Creating & Managing Dashboards

Home Assistant supports multiple dashboards, each serving a different purpose. You might have a main overview dashboard, a separate one for energy monitoring, and another optimized for a wall-mounted tablet in the kitchen.

To create a new dashboard:

1. Go to Settings → Dashboards
2. Click Add Dashboard
3. Give it a title and icon, choose whether it appears in the sidebar, and select the dashboard type (default or strategy-based)
4. Click Create

You can also edit the default Overview dashboard. By default it's auto-generated, but you can take manual control by clicking the three-dot menu in the top right of the dashboard and selecting Edit Dashboard → Take Control.

Understanding Views and Layouts

Views are the tabs within a dashboard. Each view has its own layout type:

• Masonry — The classic auto-flowing grid. Cards stack and flow to fill space. Great for general use.
• Panel — A single card fills the entire view. Perfect for full-screen maps or camera feeds.
• Sidebar — A two-column layout with a main area and a narrower sidebar. Good for pairing a map with entity controls.
• Sections (new in 2024) — An explicit grid system where you place cards into defined sections. Gives more precise layout control.

To add a new view, open edit mode (pencil icon) and click the + tab at the end of your view tabs. Give it a name, icon, and layout type.

Essential Built-in Cards

Home Assistant ships with a solid set of built-in cards. Here are the most useful ones:

Entities Card

The workhorse of Lovelace. Displays a list of entities with their current states. Supports toggles, dropdowns, sliders, and more within the card. Best for packing a lot of entities into a compact space.

Tile Card

Introduced in recent HA versions, the Tile card shows a single entity in a clean, visual tile. Supports color coding based on state. Great for building visual status boards.

Button Card (built-in)

Shows a single entity as a large tappable button. Good for lights, switches, and scripts. For advanced button customization, the HACS Button Card plugin is far more powerful.

Thermostat Card

A dedicated card for climate entities with a circular temperature dial. Essential if you have smart thermostats.

History Graph Card

Shows a time-series chart for one or more sensor entities. Useful for tracking temperature, humidity, or power consumption over time.

Map Card

Displays a live map with person/device tracker entities. Great for tracking family members' locations.

Energy Card

Part of the Energy dashboard, shows your energy consumption breakdown. Only works with properly configured energy entities.

Applying Themes

Stock Home Assistant looks clean but utilitarian. Themes completely transform the visual experience. Once you've installed a theme via HACS (see our HACS guide), applying it is simple:

1. Click your user avatar in the bottom left of the sidebar
2. Scroll to the Theme section
3. Select your installed theme from the dropdown

Popular themes in 2025 include Mushroom (pairs beautifully with Mushroom Cards), iOS Dark Mode, Caule Themes (multiple color variants), and Google Theme. Many themes come in both light and dark variants that auto-switch based on your system preference.

You can also set a dashboard-specific theme by editing a view's settings — useful if you want a dark dashboard on your wall tablet while keeping light mode elsewhere.

Must-Have HACS Custom Cards

Custom cards from HACS are where Lovelace dashboards go from functional to stunning. Here are the essential ones:

Mushroom Cards

A comprehensive collection of minimal, modern cards with consistent styling. Chips show compact status indicators, and full cards handle lights, climate, media players, and more. The most popular card collection on HACS with hundreds of thousands of installs. If you install only one HACS card set, make it this one.

Button Card

Infinitely customizable buttons with template support, icon animations, color states, and custom CSS. The learning curve is steep, but the results are impressive. Used heavily in premium dashboards shared on Reddit and the HA forums.

Mini Graph Card

Beautiful, compact line charts for any numeric sensor. Far more visually appealing than the built-in History Graph Card. Supports multiple series, fill colors, and sparkline mode.

Auto Entities

Automatically populates an Entities card based on filters (entity ID patterns, domains, states, labels). Saves you from manually listing every entity — your card updates automatically as you add new devices.

ApexCharts Card

Full-featured charting powered by ApexCharts. Supports bar charts, area charts, candlestick charts, and complex multi-series visualizations. Essential for energy monitoring dashboards.

Decluttering Card

Allows you to define reusable card templates and instantiate them with variables — eliminating repetitive YAML. A massive time-saver when building dashboards with many similar cards.

YAML Mode vs UI Mode

Lovelace cards can be configured in two ways: through the visual UI editor (click the pencil icon on any card), or by writing YAML directly. The UI editor is great for beginners, but many custom cards are YAML-only.

To switch a card to YAML mode, click the three-dot menu on the card editor and choose Show Code Editor. This shows the raw YAML for that card, which you can copy, modify, and share.

For power users, managing your entire dashboard in YAML (stored as ui-lovelace.yaml) gives you full version control via Git. Switch to YAML mode for a dashboard by going to Settings → Dashboards, clicking your dashboard, and enabling Store configuration in your editor.

Dashboard Design Tips

• Plan your views first — Decide on sections (overview, lights, climate, security, media) before adding cards.
• Use consistent card sizes — Mixing tiny and huge cards looks chaotic. Stick to 1-column and 2-column widths.
• Color-code by state — Use the Tile card's color feature to make on/off states immediately obvious.
• Browse r/homeassistant — The subreddit is full of beautiful dashboards with shared YAML configs you can adapt.
• Test on mobile — What looks perfect on desktop may be unusable on a phone. Check layouts on both.
• Use badges for quick status — Badges (small indicators at the top of a view) are great for always-visible sensor readings without taking up card space.
• Don't overcrowd — Whitespace is your friend. An uncluttered dashboard is easier and faster to use than one packed with every entity you own.

SmartWired participates in the Amazon Associates Programme. We may earn a commission from qualifying purchases at no extra cost to you.