If you want a dashboard in Home Assistant that instantly shows you the state of your home and lets you control everything in just a few taps, an Area Cards layout is one of the cleanest ways to do it. Instead of scrolling endlessly through a list of devices, you’ll see a well-organized set of cards, one for each room, with the most important controls and readings right there.
In this guide, we’ll walk through:
- Why Area Cards are perfect for room-by-room dashboards
- How to install and set up the Minimalistic Area Card custom card
- The reasoning behind the layout and design choices
- How to adapt this to your own home and devices
- The full YAML you can copy and paste
By the end, you’ll have a polished, mobile-friendly dashboard with navigation links to each room, climate controls grouped together, and a design that looks as good as it works.
Why use Area Cards for your dashboard
A lot of Home Assistant dashboards start out as a long list of entities and controls. That’s fine at first, but as you add more devices, it quickly becomes messy.
Area Cards solve this by grouping your devices logically by room.
Each card acts like a mini control panel for that space; lights, switches, sensors, or anything else that’s important. You can also set a tap action so when you click a card, you jump straight to a detailed view for that room.
The benefits are huge:
- Quick access: See the most important info in seconds.
- Logical grouping: Every device lives where it makes sense – in its room.
- Better mobile use: Cards are easier to tap than small buttons.
- Scalability: Adding a new device means updating one room card, not your whole dashboard.
What we’re building
In my setup, I’ve created a “Rooms” section at the top of my dashboard. It shows every main room in my home:
- Entry/Outdoor
- Kitchen
- Living Room
- Bedroom
- Office
- Bathroom
- Basement
Each room card has:
- A title and icon
- 2–4 key entities for that room
- A tap action to navigate to a dedicated room view
What you’ll need
Before you start, make sure you have:
- Home Assistant running (YAML mode enabled for your dashboard).
- Areas configured in Home Assistant (Settings → Areas).
- The Minimalistic Area Card custom card installed (via HACS).
- (Optional) The Mushroom card set for extra widgets like climate and entity controls.
- Entities assigned to the correct Areas.
Installing the Minimalistic Area Card
The Minimalistic Area Card is a custom Lovelace card that lets you create beautiful, compact cards for each room.
- Go to HACS → Frontend.
- Search for minimalistic-area-card.
- Click Download and reload your browser.
- Once installed, you can reference it in YAML using:
type: custom:minimalistic-area-cardFor extra polish, I also recommend installing Mushroom cards, which we’ll use later for the climate controls.
How the layout works
I’ve combined grid layouts with horizontal stacks to make the dashboard responsive and easy to read. Here’s why:
- Grid layout gives control over columns and spacing.
- Horizontal stacks group two rooms side-by-side, making them easy to scan.
- Tap actions let you jump to a dedicated view for that room.
- Temperature controls are in their own section so climate settings aren’t buried in other controls.
This approach works well for both desktop and mobile. On smaller screens, cards stack vertically while still looking clean.
Design decisions and why they matter
- 2–4 entities per card: Enough to give you useful info without cluttering the card.
- Consistent titles: “Bedroom,” “Kitchen,” “Living Room” instead of “Master Bedroom” or “Kitchen Lights” — keeps things uniform.
- Icons only where needed: Too many icons can distract from the text.
- Navigation paths: Every room card links to a detailed room dashboard for advanced controls.
Adapting it to your home
To make this setup your own:
- Change the
area:value in each card to match your Home Assistant Areas. - Replace the entities with your most-used devices for that room.
- Add or remove cards depending on how many rooms you have.
- If mobile use is your priority, set
grid_options.columnsto 6 instead of 12 for bigger touch targets.
Troubleshooting common issues
- Empty cards: Make sure your devices are actually assigned to the Area in Settings.
- Navigation not working: Check that your target view exists and matches the navigation path.
- Mobile looks cramped: Reduce the number of columns or switch to one card per row for small screens.
Full YAML
type: grid
cards:
- type: heading
heading_style: subtitle
heading: Rooms
icon: mdi:google-classroom
- type: horizontal-stack
cards:
- type: custom:minimalistic-area-card
title: Entry/Outdoor
area: front_door
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/entry-outdoor_example
entities:
- light.front_door_light_example
- light.entrance_light_example
- light.back_patio_light_example
- type: custom:minimalistic-area-card
title: Kitchen
area: kitchen
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/kitchen_example
entities:
- sensor.kitchen_temperature_example
- switch.all_kitchen_lights_example
- light.kitchen_leds_example
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: custom:minimalistic-area-card
title: Living Room
area: living_room
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/living-room_example
entities:
- sensor.kitchen_temperature_example
- input_boolean.living_room_lights_example
- light.back_patio_light_example
- type: custom:minimalistic-area-card_example
title: Bedroom
area: bedroom
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/bedroom_example
entities:
- switch.bedroom_switch_example
- sensor.bedroom_temperature_example
- light.bedroom_lamp_bulb_example
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: custom:minimalistic-area-card
title: Office
area: office
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/office_example
entities:
- sensor.office_temperature_sensor_temperature_example
- switch.office_switch_example
- type: custom:minimalistic-area-card
title: Bathroom
area: upstairs_bathroom
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/bathroom_example
entities:
- switch.bathroom_switch_example
- light.third_reality_inc_3rsnl02043z_example
- sensor.bathroom_temperature_temperature_example
- sensor.bathroom_temperature_humidity_example
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: custom:minimalistic-area-card
title: Basement
area: basement
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /dashboard-overview/basement_example
entities:
- light.all_basement_lights_example
- light.laundry_lights_example
- sensor.basement_temp_temperature_example
- sensor.basement_temp_humidity_example
view_layout:
grid-column: 4 / span 6
grid_options:
rows: auto
columns: 12FAQs
Do I need to know YAML to build this dashboard?
Not necessarily. You can build most of it through the UI in Lovelace, but YAML gives you much more control over the layout and features. Even if you’re not a YAML expert, you can copy the code in this guide and just change the entities and areas to match your home.
What is the Minimalistic Area Card, and how is it different from default cards?
The Minimalistic Area Card is a custom Lovelace card that lets you display a room’s devices in a compact, attractive way. It looks cleaner than the default Area view and is easier to customize. It’s perfect for dashboards where you want everything visible without endless scrolling.
Can I do this without installing custom cards?
Yes, but it won’t look as polished. You can use default entity cards or button cards, but you’ll lose some of the design flexibility and navigation options. If you want the exact look shown in this guide, you’ll need the Minimalistic Area Card from HACS.
How do I make sure the cards show the right devices?
Home Assistant uses Areas to group devices. Go to Settings → Devices & Services → Devices, and make sure each device is assigned to the correct Area. Only devices in that Area will appear on your Area Card.
Can I add more than two cards in a row?
Yes. The number of cards per row depends on the grid_options.columns value in the YAML. For example, setting columns: 12 with two cards gives each card 6 columns, but you could make them smaller to fit 3 or 4 in one row.
Will this dashboard work well on mobile?
Yes. The grid layout automatically stacks cards vertically on smaller screens. For better mobile usability, you might reduce the number of columns per card so they’re easier to tap.
Can I mix room cards with other dashboard elements?
Absolutely. You can have a “Rooms” section at the top and then add sections for climate control, security, or entertainment below. This setup is flexible, so you can combine it with graphs, camera feeds, or anything else you use often.
