Dashboard Design in Home Assistant

Lovelace Mushroom Design

A good dashboard makes the difference between a smart home you use daily and one you forget exists. This guide helps you build dashboards that are both beautiful and functional.

---

🎯 Dashboard Philosophy

What Makes a Good Dashboard?

Principle	Description
Overview first	See home status at a glance
One-click actions	No deep menus for daily tasks
Mobile-friendly	Works equally well on phone and tablet
Consistent design	Same style and colors everywhere
Relevant information	Show only what matters

The Three Dashboard Types

┌─────────────────────────────────────────────────────────────┐
│                    DASHBOARD TYPES                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  📱 MOBILE         🖥️ TABLET/WALL         📊 ADMIN          │
│  ──────────        ────────────────       ─────────         │
│  Quick actions     Overview + control     Everything        │
│  Compact layout    Room-based             Debugging         │
│  Touch-optimized   Ambient display        Graphs/stats      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

📐 Lovelace Basics

Views and Sections

Home Assistant 2024+ introduced Sections - a new way to organize cards:

# Traditional Grid Layout
views:
  - title: Home
    type: masonry  # or grid
    cards:
      - type: light
        entity: light.living_room

# New Sections Layout (recommended)
views:
  - title: Home
    type: sections
    sections:
      - title: Lighting
        cards:
          - type: light
            entity: light.living_room

Sections advantages

• Drag-and-drop in UI editor
• Automatically responsive layout
• Easier to organize cards in groups
• Slider to adjust card width

Create New Dashboard

1. Go to Settings → Dashboards

2. Click Add Dashboard

3. Choose a name and icon

4. Select Start with an empty dashboard

5. Click the three dots → Edit Dashboard

6. Choose Sections as layout type

---

🍄 Mushroom Cards

Mushroom is the most popular custom card collection. Modern design, full UI editor support, and it just looks good.

Installation

1. Open HACS → Frontend

2. Search for “Mushroom”

3. Install Mushroom and Mushroom Themes

4. Restart Home Assistant

5. Clear browser cache (Ctrl+Shift+R)

Mushroom Card Types

Card	Use	Entity Type
Entity Card	General display	All
Light Card	Light with slider	light.*
Switch Card	On/off toggle	switch.*, input_boolean
Fan Card	Fan control	fan.*
Cover Card	Blinds/doors	cover.*
Climate Card	Thermostat	climate.*
Person Card	Presence	person.*
Alarm Card	Alarm panel	alarm_control_panel.*
Media Card	Media player	media_player.*
Lock Card	Locks	lock.*
Vacuum Card	Robot vacuum	vacuum.*
Template Card	Custom content	All
Chips Card	Small status badges	All
Title Card	Section header	-

Example: Living Room Section

type: sections
sections:
  - title: Living Room
    cards:
      # Chips at top for status
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.living_room_temperature
            icon: mdi:thermometer
          - type: entity
            entity: sensor.living_room_humidity
            icon: mdi:water-percent

      # Light with slider
      - type: custom:mushroom-light-card
        entity: light.living_room_ceiling
        name: Ceiling Light
        show_brightness_control: true
        show_color_control: true
        use_light_color: true

      # TV control
      - type: custom:mushroom-media-player-card
        entity: media_player.living_room_tv
        use_media_info: true
        show_volume_level: true
        volume_controls:
          - volume_buttons

      # Thermostat
      - type: custom:mushroom-climate-card
        entity: climate.living_room
        show_temperature_control: true
        hvac_modes:
          - heat
          - "off"

Mushroom Template Card

The most flexible card - make exactly what you want:

type: custom:mushroom-template-card
primary: "{{ states('sensor.power_consumption') }} W"
secondary: >
  {% if states('sensor.power_consumption')|float > 2000 %}
    High consumption!
  {% else %}
    Normal
  {% endif %}
icon: mdi:flash
icon_color: >
  {% if states('sensor.power_consumption')|float > 2000 %}
    red
  {% elif states('sensor.power_consumption')|float > 1000 %}
    orange
  {% else %}
    green
  {% endif %}
tap_action:
  action: navigate
  navigation_path: /lovelace/energy

---

🎨 Design Tips

Colors and Consistency

Use Mushroom Themes for unified look:

# In configuration.yaml
frontend:
  themes: !include_dir_merge_named themes

# Download themes via HACS:
# - Mushroom Shadow (dark)
# - Mushroom Square (light)

Chip Cards for Status

Small badges at top of dashboard showing important info:

type: custom:mushroom-chips-card
chips:
  # Who's home
  - type: template
    icon: mdi:home
    content: >
      {{ states.person | selectattr('state', 'eq', 'home') | list | count }}
    tap_action:
      action: navigate
      navigation_path: /lovelace/people

  # Lights on count
  - type: template
    icon: mdi:lightbulb
    content: >
      {{ states.light | selectattr('state', 'eq', 'on') | list | count }}
    icon_color: >
      {% if states.light | selectattr('state', 'eq', 'on') | list | count > 0 %}
        yellow
      {% else %}
        grey
      {% endif %}

  # Outside temperature
  - type: entity
    entity: sensor.outside_temperature
    icon: mdi:thermometer

  # Alarm status
  - type: entity
    entity: alarm_control_panel.home
    icon: mdi:shield-home

Conditional Cards

Show cards based on state:

type: conditional
conditions:
  - entity: binary_sensor.motion_entrance
    state: "on"
card:
  type: custom:mushroom-entity-card
  entity: binary_sensor.motion_entrance
  name: Motion in entrance!
  icon_color: red

Grid Layout for Rooms

Organize cards in a neat grid:

type: grid
columns: 2
square: false
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room
    layout: vertical
  - type: custom:mushroom-light-card
    entity: light.kitchen
    layout: vertical
  - type: custom:mushroom-light-card
    entity: light.bedroom
    layout: vertical
  - type: custom:mushroom-light-card
    entity: light.bathroom
    layout: vertical

---

📱 Mobile Optimization

Touch-Friendly Cards

# Larger touch area with layout: vertical
type: custom:mushroom-entity-card
entity: light.living_room
layout: vertical
fill_container: true
tap_action:
  action: toggle
hold_action:
  action: more-info

Separate Mobile Views

views:
  # Desktop/Tablet view
  - title: Home
    icon: mdi:home
    path: home
    visible:
      - user: desktop_user
    cards: [...]

  # Mobile view
  - title: Home Mobile
    icon: mdi:cellphone
    path: home-mobile
    panel: true  # Full width
    visible:
      - user: mobile_user
    cards: [...]

Bottom Navigation

For wall-mounted tablets - navigation at bottom:

# Use custom:layout-card or
# navbar integration from HACS

---

🛠️ Advanced Cards

Mini Graph Card

For history and graphs (install via HACS):

type: custom:mini-graph-card
entities:
  - sensor.living_room_temperature
  - sensor.bedroom_temperature
hours_to_show: 24
points_per_hour: 2
line_width: 2
show:
  labels: true
  points: false
  legend: true

Button Card

Extremely flexible button (HACS):

type: custom:button-card
entity: light.living_room
name: Living Room
icon: mdi:sofa
show_state: true
styles:
  card:
    - background-color: |
        [[[
          if (entity.state === 'on')
            return 'rgba(255, 200, 100, 0.3)';
          return 'rgba(50, 50, 50, 0.3)';
        ]]]
    - border-radius: 15px
    - padding: 15px

Swipe Card

Swipe between multiple cards:

type: custom:swipe-card
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room
  - type: custom:mushroom-light-card
    entity: light.kitchen
  - type: custom:mushroom-light-card
    entity: light.bedroom

---

🎭 Themes

Install Theme

1. Enable themes in configuration.yaml:

   frontend:
     themes: !include_dir_merge_named themes

2. Create folder: config/themes/

3. Download theme from HACS or manually

4. Restart Home Assistant

5. Select theme: Profile → Theme

Popular Themes

Theme	Style	Source
Mushroom Shadow	Dark, modern	HACS
Mushroom Square	Light, sharp corners	HACS
Catppuccin	Pastel colors	HACS
iOS Theme	Apple-inspired	HACS
Noctis	Dark with accents	HACS

Custom Background

# In your theme YAML:
mushroom-shadow:
  background-image: "center / cover no-repeat url('/local/backgrounds/dark-home.jpg')"
  # Place image in: config/www/backgrounds/

---

📋 Best Practices

Do’s ✅

Practice	Why
Group by room	Intuitive for all users
Consistent icons	Easier to recognize
Limit card count	Overview over everything
Test on mobile	Most people use phones
Use chips for status	Quick info without clutter

Don’ts ❌

Avoid	Why
Too many views	Hard to navigate
Inconsistent styling	Looks messy
Small touch targets	Frustrating on mobile
Everything on one page	Information overload
Complex YAML without backup	Risk losing work

---

🔧 Troubleshooting

Card Not Showing

# Check:
1. Is custom card installed?
2. Is browser cache cleared? (Ctrl+Shift+R)
3. Is resource added correctly?
4. Check browser console for errors (F12)

Theme Not Working

# Check:
1. Is themes enabled in configuration.yaml?
2. Is themes folder correct?
3. Is HA restarted after changes?
4. Is theme selected in profile?

Slow Dashboard

# Optimize:
1. Reduce entities per view
2. Use picture-elements sparingly
3. Avoid too many mini-graph-cards
4. Consider separate views for heavy graphs

---

❓ Frequently Asked Questions

Ofte stillede spørgsmål

Should I use YAML or the UI editor?

Start with the UI editor - it's much better now. Switch to YAML when you need advanced features like templates or card-mod styling.

How do I backup my dashboard?

Go to dashboard → three dots → Raw configuration editor. Copy all YAML and save it in a file. For automatic backup, use git to version your config folder.

Can I have different dashboards for different users?

Yes! Create multiple dashboards and set visibility per user. You can also make an 'admin' dashboard only visible to you.

Why does my dashboard look different on mobile?

Home Assistant automatically adapts layout to screen size. Use 'panel: true' for full width on mobile, or create separate mobile views.

---

📚 Next Steps

Node-RED

Advanced automations.

See guide →

HACS

More custom cards and integrations.

See guide →

---

Last updated: December 2025