Guide 15 : How to Build Your First Beautiful Home Assistant Dashboard

Now that you’ve seen what’s possible with Home Assistant dashboards, it’s time to build your own — no coding required!

This guide will take you step-by-step through everything you need to know to create a clean, powerful, and personalized dashboard using HACS, custom cards, and the Home Assistant UI.

🧠 Don’t worry if this all sounds technical — we’ll explain everything in plain English. You don’t need to know how to program.

✅ Step 1: Make Sure HACS is Installed

HACS (Home Assistant Community Store) lets you easily install extra design elements like beautiful cards and themes.

How to install HACS:

1. Go to Settings → Add-ons.
2. Click Add-on Store (bottom right).
3. Search for HACS. If you don’t see it:
   • Go to hacs.xyz and follow the instructions.
   • It takes ~5–10 minutes and only needs to be done once.
4. After install, go to Settings → Devices & Services → Integrations, click “+ Add Integration”, and search for HACS.
5. Follow the login flow (you’ll need a GitHub account — free).

Once installed, you’ll have a new HACS menu in your sidebar.

🎨 Step 2: Install the Cards You’ll Need

From HACS, install the most useful custom cards:

1. Go to HACS → Frontend
2. Click the “+ Explore & Download Repositories” button
3. Search for and install:
   • Mushroom – stylish modern cards
   • card-mod – lets you style dashboards (e.g. background images)
   • layout-card – flexible layouts (columns, grids)
   • clock-weather-card – beautiful time + weather
   • apexcharts-card – fancy line/area charts
   • frigate-card – if you use Frigate for smart cameras

After installing each card:

• Hit “Reload Resources” (top right in HACS → Frontend)
• Then refresh your Home Assistant tab (F5)

🧱 Step 3: Create a New Dashboard

Let’s build a fresh dashboard.

1. Go to Settings → Dashboards (or click the sidebar icon with 3 squares)
2. Click “+ Add Dashboard”
3. Name it (e.g. “Living Room”) and click Create

Now you’re in the dashboard editor — no YAML needed!

🧩 Step 4: Add Cards to Your Dashboard

Click “+ Add Card” to start building. Here are some great ones to try:

🕒 Clock + Weather

• Use custom:clock-weather-card
• Add your weather entity (like weather.home)
• Customize location name, icons, etc.

🌡️ Temperature + Humidity

• Use custom:mushroom-template-card
• Example: show an icon, value, and change color if it’s too hot

type: custom:mushroom-template-card
template: room_info
entity: sensor.living_room_temperature
primary: "Living Room"
secondary: "{{ states('sensor.living_room_temperature') }} °C"
icon: mdi:thermometer
icon_color: >
  {% if states('sensor.living_room_temperature')|float > 25 %}
    red
  {% else %}
    green
  {% endif %}

💡 Lights Control

• Use custom:mushroom-light-card
• Pick one of your light entities (like light.ceiling_light)
• Customize brightness slider, icons, colors

🎬 Scenes or Moods

• Use custom:mushroom-template-card again
• Each card runs a scene (like “Movie” or “Relax”)

❄️ Thermostat

• Use custom:mushroom-climate-card or simple-thermostat
• Choose your climate entity (like climate.living_room)

📷 Cameras

• Use picture-glance or frigate-card
• Pick a camera entity
• Optionally show other sensors (like motion status)

🗂️ Step 5: Organize with Stacks

To keep your dashboard neat:

• Use vertical-stack to group cards top to bottom
• Use horizontal-stack for side-by-side
• For more control, use layout-card to create columns or grids

🖼️ Step 6: Add Style (Optional but Fun)

Install and use card-mod to:

• Set background images for dashboards
• Round corners, set transparencies
• Match colors to your style or room

Example (in Dashboard YAML settings):

views:
  - title: Living Room
    path: living-room
    background: center / cover no-repeat url("/local/livingroom.jpg") fixed

(Place your background image in www folder under /config)

⚙️ UI vs YAML — Which Should You Use?

• UI (visual editor) is great for beginners and fast edits
• YAML gives more flexibility and lets you copy/paste examples
• You can switch anytime by clicking “Show Code Editor” on any card

Use both — start visually, and use YAML only when needed.

🏁 You’re Done!

Hit Save, go to your new dashboard, and enjoy your creation!

You now have a beautiful, personalized, and fully functional smart home interface.

🎨 Want to go further? Try using your house floorplan, icons that change colors based on status, or seasonal dashboard themes!

In our next guide, we’ll explore how to create dynamic floorplans or set up seasonal themes for your dashboards.