Zum Inhalt springen
Alles Automatisch
Guide

Home Assistant Dashboard einrichten

Home Assistant Dashboard erstellen: Mushroom Cards und Custom Cards nutzen, Themes installieren und für Tablet und Mobile optimieren.

Fortgeschritten10 Min. LesezeitAktualisiert am

Überblick: Das Dashboard in Home Assistant

Home Assistant erstellt automatisch ein Dashboard mit allen erkannten Geräten. Falls du die Grundlagen noch brauchst, schau dir zuerst den Guide Dashboard verstehen an. Die wahre Stärke liegt in der Anpassung: Du kannst eigene Dashboards erstellen, verschiedene Kartentypen kombinieren und mit Custom Cards aus HACS das Aussehen komplett verändern.

Dashboard-Strategien

StrategieBeschreibungAm besten für
Auto-DashboardHA erstellt und aktualisiert automatischEinsteiger, schneller Start
Manuelles DashboardDu baust alles selbst per UI-EditorDie meisten Nutzer
YAML-DashboardVollständige Kontrolle über YAMLPower-User, Versionierung
Sections-DashboardStandard-Layout mit Drag & DropNeue Dashboards (empfohlen)

Eigenes Dashboard erstellen

  1. Dashboard anlegen: Einstellungen, Dashboards, + Dashboard hinzufügen
  2. Name vergeben: Einen Namen eingeben (z.B. Mein Dashboard) und im Seitenmenü anzeigen wählen
  3. Bearbeiten öffnen: Das neue Dashboard öffnen, drei Punkte, Dashboard bearbeiten
  4. Ansichten erstellen: Tabs hinzufügen: Übersicht, Energie, Kameras, System
  5. Karten hinzufügen: In jeder Ansicht Karten hinzufügen mit dem Plus-Button
  6. Fertig: Klicke auf Fertig um den Bearbeitungsmodus zu verlassen

Eingebaute Kartentypen: Die wichtigsten

Entities Card: Der Alleskönner

yaml
1# Entities Card mit verschiedenen Typen
2type: entities
3title: "Wohnzimmer"
4show_header_toggle: true
5entities:
6  - entity: light.wohnzimmer
7    name: Deckenlampe
8  - entity: light.stehlampe
9    name: Stehlampe
10  - type: divider
11  - entity: sensor.wohnzimmer_temperatur
12    name: Temperatur
13    icon: mdi:thermometer
14  - entity: sensor.wohnzimmer_luftfeuchtigkeit
15    name: Luftfeuchtigkeit
16  - type: divider
17  - entity: media_player.sonos_wohnzimmer
18    name: Sonos
19  - type: button
20    name: "Alles aus"
21    icon: mdi:power
22    action_name: Ausschalten
23    tap_action:
24      action: perform-action
25      perform_action: homeassistant.turn_off
26      target:
27        area_id: wohnzimmer

Gauge Card: Werte visuell darstellen

CPU-Temperatur mit Farbzonen

yaml
1type: gauge
2entity: sensor.cpu_temperatur
3name: "Server CPU"
4min: 20
5max: 100
6needle: true
7segments:
8  - from: 20
9    color: "#43A047"
10    label: "Normal"
11  - from: 60
12    color: "#FFC107"
13    label: "Warm"
14  - from: 80
15    color: "#D32F2F"
16    label: "Heiß"

CO2-Wert im Wohnzimmer

yaml
1type: gauge
2entity: sensor.luftqualitaet
3name: "CO2 Wohnzimmer"
4unit: "ppm"
5min: 400
6max: 2000
7segments:
8  - from: 400
9    color: "#43A047"
10    label: "Gut"
11  - from: 800
12    color: "#FFC107"
13    label: "Mäßig"
14  - from: 1200
15    color: "#FF5722"
16    label: "Schlecht"
17  - from: 1600
18    color: "#D32F2F"
19    label: "Lüften!"

Conditional Card: Dynamisch ein/ausblenden

Nur bei offener Haustür

yaml
1type: conditional
2conditions:
3  - condition: state
4    entity: binary_sensor.haustuer
5    state: "on"
6card:
7  type: markdown
8  content: >
9    ## Die Haustür ist offen!
10    Seit {{ relative_time(states.binary_sensor.haustuer.last_changed) }}.

Nur bei Regen

yaml
1type: conditional
2conditions:
3  - condition: state
4    entity: weather.home
5    state: "rainy"
6card:
7  type: entity
8  entity: weather.home
9  name: "Es regnet!"

Grid Card: Kompaktes Layout

yaml
1# Grid Card für kompakte Übersicht
2type: grid
3columns: 3
4square: false
5cards:
6  - type: button
7    entity: light.wohnzimmer
8    name: Wohnzimmer
9    show_state: true
10    tap_action:
11      action: toggle
12  - type: button
13    entity: light.kueche
14    name: Küche
15    show_state: true
16    tap_action:
17      action: toggle
18  - type: button
19    entity: light.schlafzimmer
20    name: Schlafzimmer
21    show_state: true
22    tap_action:
23      action: toggle
24  - type: button
25    entity: cover.rolladen_wz
26    name: Rollladen
27    icon: mdi:blinds
28  - type: button
29    entity: lock.haustuer
30    name: Haustür
31  - type: button
32    entity: vacuum.roborock
33    name: Staubsauger

Custom Cards über HACS: Die Besten im Detail

Custom Cards transformieren dein Dashboard von funktional zu wunderschön. Hier sind die wichtigsten:

Mushroom Cards: Das Must-Have

Die beliebtesten Custom Cards mit über 500.000 Downloads. Modernes, minimalistisches Design mit vielen Varianten: Light, Entity, Title, Chips, Template und mehr.

yaml
1# Mushroom Light Card
2type: custom:mushroom-light-card
3entity: light.wohnzimmer
4name: Wohnzimmer Licht
5show_brightness_control: true
6show_color_control: true
7use_light_color: true
8layout: horizontal
yaml
1# Mushroom Chips Card: Kompakte Status-Leiste
2type: custom:mushroom-chips-card
3chips:
4  - type: weather
5    entity: weather.home
6    show_temperature: true
7  - type: entity
8    entity: sensor.wohnzimmer_temperatur
9    icon: mdi:thermometer
10  - type: entity
11    entity: sensor.stromverbrauch
12    icon: mdi:flash
13  - type: conditional
14    conditions:
15      - entity: binary_sensor.haustuer
16        state: "on"
17    chip:
18      type: entity
19      entity: binary_sensor.haustuer
20      icon: mdi:door-open
21      icon_color: red
22  - type: alarm-control-panel
23    entity: alarm_control_panel.alarm
yaml
1# Mushroom Template Card: Dynamischer Inhalt
2type: custom:mushroom-template-card
3primary: >
4  {% set hour = now().hour %}
5  {% if hour < 12 %}Guten Morgen{% elif hour < 18 %}Hallo{% else %}Guten Abend{% endif %}, {{ user }}!
6secondary: >
7  {{ states('sensor.wohnzimmer_temperatur') }} Grad 
8  {{ states('sensor.luftfeuchtigkeit') }}% Luftfeuchtigkeit
9  {% if is_state('binary_sensor.regen', 'on') %}(Regen){% else %}(Trocken){% endif %}
10icon: mdi:home-heart
11icon_color: >
12  {% if is_state('alarm_control_panel.alarm', 'armed_away') %}red
13  {% else %}green{% endif %}
14tap_action:
15  action: navigate
16  navigation_path: /lovelace/übersicht
yaml
1# Mushroom Person Card: Anwesenheit
2type: custom:mushroom-person-card
3entity: person.max
4layout: horizontal
5primary_info: name
6secondary_info: state
7icon_type: entity-picture

Mini Graph Card: Kompakte Verlaufsgrafiken

yaml
1# Mini Graph Card mit mehreren Linien
2type: custom:mini-graph-card
3entities:
4  - entity: sensor.aussentemperatur
5    name: Aussen
6    color: "#03A9F4"
7  - entity: sensor.wohnzimmer_temperatur
8    name: Innen
9    color: "#FF9800"
10hours_to_show: 48
11line_width: 2
12points_per_hour: 2
13show:
14  labels: true
15  points: false
16  legend: true
17  average: true
18  extrema: true
19color_thresholds:
20  - value: 0
21    color: "#1565C0"
22  - value: 15
23    color: "#43A047"
24  - value: 25
25    color: "#FF6F00"
26  - value: 35
27    color: "#D32F2F"

ApexCharts Card: Professionelle Diagramme

yaml
1# ApexCharts: Energieverbrauch als Balkendiagramm
2type: custom:apexcharts-card
3header:
4  title: Stromverbrauch diese Woche
5  show: true
6graph_span: 7d
7span:
8  end: day
9series:
10  - entity: sensor.strom_taeglich
11    type: column
12    name: Verbrauch (kWh)
13    color: "#E53935"
14    group_by:
15      func: max
16      duration: 1d
17  - entity: sensor.solar_taeglich
18    type: column
19    name: Solar (kWh)
20    color: "#FFC107"
21    group_by:
22      func: max
23      duration: 1d
24apex_config:
25  chart:
26    stacked: false
27  plotOptions:
28    bar:
29      borderRadius: 4

Floor Plan Card: Grundriss als Dashboard

yaml
1# Picture Elements: Grundriss mit interaktiven Elementen
2type: picture-elements
3image: /local/images/grundriss.png
4elements:
5  - type: state-icon
6    entity: light.wohnzimmer
7    style:
8      top: 45%
9      left: 30%
10    tap_action:
11      action: toggle
12  - type: state-label
13    entity: sensor.wohnzimmer_temperatur
14    suffix: " Grad"
15    style:
16      top: 50%
17      left: 30%
18      font-size: 12px
19      color: white
20      background: "rgba(0,0,0,0.5)"
21      padding: 2px 6px
22      border-radius: 4px
23  - type: state-icon
24    entity: binary_sensor.haustuer
25    style:
26      top: 85%
27      left: 50%
28  - type: icon
29    icon: mdi:cctv
30    entity: camera.flur
31    style:
32      top: 10%
33      left: 80%
34    tap_action:
35      action: more-info

Tipp: Den Grundriss von Hand mit prozentualen Koordinaten bauen kostet Zeit. Der Floorplan Generator macht das visuell: Räume zeichnen, Entities per Drag & Drop platzieren, YAML exportieren.

Weitere empfehlenswerte Custom Cards

  • Battery State Card: Übersicht aller Batteriestände mit Warnfarben
  • ApexCharts Card: Professionelle Diagramme (Linien, Balken, Donut)
  • Atomic Calendar: Kalender-Karte mit Google/iCal Integration
  • Waste Collection: Müllabfuhr-Kalender mit Countdown
  • Mini Media Player: Kompakter, schöner Mediaplayer
  • Vehicle Card: Auto-Status: Ladezustand, Reichweite, Position
  • Flower Card: Pflanzenpflege: Feuchte, Licht, Temperatur
  • Layout Card: Erweiterte Layout-Kontrolle für Masonry (bei Sections weniger relevant)

Shortcut Card: Schnelle Navigation

Die Shortcut Card ist ein Kartentyp für schnelle Navigation und Aktionen. Du kannst damit zu anderen Dashboards, Views, Bereichen oder Geräteseiten springen, externe URLs öffnen, Assist starten oder beliebige Actions ausführen. Icon und Farbe erkennt die Karte automatisch aus dem Ziel. Es gibt auch eine Badge-Variante für die Badge-Leiste.

yaml
# Shortcut Card: Navigation zu einer View
type: shortcut
tap_action:
  action: navigate
  navigation_path: /lovelace/kitchen

Tile Card: Der Allrounder für Sections

Die Tile Card ist der Standard-Kartentyp im Sections-Layout. Sie unterstützt Features je nach Entity-Typ:

  • Lichter: Helligkeitsregler, Farbsteuerung, Farb-Favoriten als Buttons
  • Media Player: Source-Auswahl, Sound-Mode, Playback-Buttons (Play, Pause, Stop, Vor, Zurück)
  • Wetter: Stundenprognose als Temperaturlinie, Tagesprognose mit Min/Max-Balken
  • Cover & Ventile: Positionssteuerung mit Favoriten-Positionen (offen, halb, geschlossen)
  • Zeitstempel: Anzeigeformat (absolut, Datum, Uhrzeit, relativ) direkt im Karten-Editor wählbar
yaml
1# Tile Card mit Light-Features
2type: tile
3entity: light.wohnzimmer_decke
4features:
5  - type: light-brightness
6  - type: light-color-temp

Themes: Das Aussehen verändern

Themes verändern das gesamte Erscheinungsbild: Farben, Schriften, Abstände, Rundungen.

Theme installieren

  1. HACS öffnen: HACS, Frontend, Themes durchsuchen
  2. Theme installieren: Theme auswählen und installieren
  3. HA neustarten: Einstellungen, System, Neustart
  4. Theme aktivieren: Profil (unten links), Theme auswählen

Beliebte Themes

  • iOS Theme: Apple-inspiriertes Design mit glasigen Karten und subtilen Schatten
  • Catppuccin: Warme Pastellfarben, sehr beliebt in der Dev-Community
  • Midnight: Tiefes Dunkelblau, perfekt für OLED-Displays
  • Mushroom Shadow: Optimiert für Mushroom Cards mit schönen Schatten

Eigenes Theme erstellen

yaml
1# Eigenes Theme (themes.yaml)
2# In configuration.yaml: frontend: themes: !include themes.yaml
3
4mein_theme:
5  # Hauptfarben
6  primary-color: "#03A9F4"
7  accent-color: "#00BCD4"
8  
9  # Hintergrund
10  ha-card-background: "rgba(255,255,255,0.95)"
11  card-background-color: "rgba(255,255,255,0.95)"
12  primary-background-color: "#FAFAFA"
13  
14  # Karten
15  ha-card-border-radius: "16px"
16  ha-card-box-shadow: "0 2px 8px rgba(0,0,0,0.08)"
17  
18  # Dark Mode Variante
19mein_theme_dark:
20  primary-color: "#03A9F4"
21  accent-color: "#00BCD4"
22  ha-card-background: "rgba(30,30,30,0.95)"
23  card-background-color: "rgba(30,30,30,0.95)"
24  primary-background-color: "#121212"
25  ha-card-border-radius: "16px"
26  ha-card-box-shadow: "0 2px 12px rgba(0,0,0,0.3)"
27  text-primary-color: "#E0E0E0"

Dashboard-Beispiele für verschiedene Szenarien

Wohnzimmer-Übersicht

yaml
1# Komplettes Wohnzimmer-Dashboard
2# Vertical Stack mit allen Elementen
3type: vertical-stack
4cards:
5  # Status-Chips oben
6  - type: custom:mushroom-chips-card
7    chips:
8      - type: weather
9        entity: weather.home
10      - type: entity
11        entity: sensor.wohnzimmer_temperatur
12      - type: entity
13        entity: sensor.wohnzimmer_luftfeuchtigkeit
14
15  # Licht-Steuerung
16  - type: custom:mushroom-title-card
17    title: Beleuchtung
18  - type: grid
19    columns: 2
20    square: false
21    cards:
22      - type: custom:mushroom-light-card
23        entity: light.deckenlampe
24        show_brightness_control: true
25        use_light_color: true
26      - type: custom:mushroom-light-card
27        entity: light.stehlampe
28        show_brightness_control: true
29        use_light_color: true
30
31  # Klima
32  - type: custom:mushroom-title-card
33    title: Klima
34  - type: custom:mini-graph-card
35    entities:
36      - sensor.wohnzimmer_temperatur
37    hours_to_show: 24
38    line_width: 2
39    show:
40      labels: true
41      points: false
42
43  # Media
44  - type: custom:mushroom-title-card
45    title: Medien
46  - type: custom:mini-media-player
47    entity: media_player.sonos_wohnzimmer
48    artwork: cover
49    hide:
50      power: false
51      volume: false

Status-Dashboard für den Eingangsbereich

yaml
1# Eingangsbereich Quick-Status
2type: vertical-stack
3cards:
4  - type: custom:mushroom-template-card
5    primary: >
6      {% if is_state('person.max', 'home') and is_state('person.anna', 'home') %}
7        Alle zuhause
8      {% elif is_state('person.max', 'home') %}
9        Max ist zuhause
10      {% elif is_state('person.anna', 'home') %}
11        Anna ist zuhause
12      {% else %}
13        Niemand zuhause
14      {% endif %}
15    secondary: >
16      {{ states('sensor.haustuer_letzte_aktivitaet') }}
17    icon: mdi:home-account
18
19  - type: conditional
20    conditions:
21      - condition: state
22        entity: binary_sensor.haustuer
23        state: "on"
24    card:
25      type: markdown
26      content: "## Haustür ist OFFEN!"
27
28  - type: grid
29    columns: 3
30    cards:
31      - type: button
32        entity: lock.haustuer
33        name: Schloss
34        tap_action:
35          action: toggle
36      - type: button
37        entity: light.flur
38        name: Flur
39      - type: button
40        entity: cover.garage
41        name: Garage

Responsive Dashboard: Mobile Optimierung

Die meisten Nutzer greifen auch vom Smartphone auf ihr Dashboard zu. Hier sind wichtige Tipps:

  • Grid Cards verwenden: Sie passen sich automatisch an die Bildschirmbreite an
  • Separate Mobile-Ansicht: Erstelle eine eigene Ansicht nur für Smartphones
  • Mushroom Chips: Kompakte Status-Leiste spart vertikalen Platz
  • Vertical Stacks: Karten untereinander statt nebeneinander
  • Visibility Conditions: Karten je nach Bildschirmgröße oder Entity-Zustand ein-/ausblenden. Die Bedingung "Aktuelle Entität" bezieht sich direkt auf die Entity der Karte, auch Attribute lassen sich prüfen
  • Tap Actions: Größere Touch-Ziele für einfache Bedienung
yaml
1# Ansicht: Nur auf Mobile sichtbar
2# In der Ansicht-Konfiguration:
3title: Mobile
4icon: mdi:cellphone
5visible:
6  - user: alle_benutzer
7# Oder: Panel-Modus für Vollbild-Karte
8panel: true

Dashboard für Wandtablet

Viele Nutzer montieren ein günstiges Tablet an die Wand als permanentes Smart-Home-Display.

  • Panel-Modus: Eine Karte füllt den gesamten Bildschirm
  • Kiosk-Modus: Versteckt Sidebar und Header (über HACS Kiosk Mode)
  • Fully Kiosk Browser: Android-App speziell für Dashboard-Displays
  • OLED-Theme: Dunkles Theme für minimalen Stromverbrauch
yaml
1# Kiosk-Modus für Wandtablet
2# Nach Installation von kiosk-mode über HACS:
3kiosk_mode:
4  hide_header: true
5  hide_sidebar: true
6  # Nur für bestimmte Benutzer:
7  entity_settings:
8    - entity:
9        user: tablet_user
10      hide_header: true
11      hide_sidebar: true

Hinweis: Ein Amazon Fire HD 10 (ca. 100 EUR) mit Fully Kiosk Browser + einem einfachen Tablethalter ergibt ein hervorragendes Wanddisplay. Alternative: Altes iPad mit Guided Access.

Häufige Fragen

Wie installiere ich Custom Cards in Home Assistant?

Custom Cards installierst du über HACS im Bereich Frontend. Dort suchst du die gewünschte Karte, klickst auf Installieren und lädst danach das Dashboard im Browser neu. Anschließend taucht die Karte im Karten-Editor unter den Custom Cards auf.

Was sind Mushroom Cards?

Mushroom Cards sind die beliebtesten Custom Cards für Home Assistant, mit über 500.000 Downloads. Sie haben ein modernes, minimalistisches Design in vielen Varianten: Light, Entity, Title, Chips, Template und Person. Du installierst sie über HACS und kombinierst sie frei mit den eingebauten Kartentypen.

Wie installiere ich ein Theme in Home Assistant?

Öffne HACS, wechsle in den Bereich Frontend und such dir ein Theme aus, zum Beispiel iOS Theme oder Catppuccin. Nach der Installation startest du Home Assistant neu. Danach aktivierst du das Theme in deinem Profil unten links in der Seitenleiste.

Wie nutze ich Home Assistant auf einem Wandtablet?

Ein günstiges Android-Tablet wie das Amazon Fire HD 10 mit dem Fully Kiosk Browser reicht völlig. Mit dem Kiosk Mode aus HACS versteckst du Seitenleiste und Header, der Panel-Modus lässt eine einzelne Karte den ganzen Bildschirm füllen. Ein dunkles Theme spart bei OLED-Displays Strom.

Wie erstelle ich ein eigenes Dashboard in Home Assistant?

Unter Einstellungen, Dashboards, Dashboard hinzufügen legst du ein neues Dashboard an und blendest es im Seitenmenü ein. Danach öffnest du es, klickst auf die drei Punkte und wählst Dashboard bearbeiten. Jetzt kannst du Ansichten als Tabs anlegen und Karten über den Plus-Button hinzufügen.

Weiter: Lerne die YAML-Konfiguration kennen, um noch mehr aus deinem Dashboard herauszuholen: YAML-Konfiguration

Weiter lesen:

Zum Thema

Passende Videos

Claude Code und Home Assistant per MCP verbinden
Home Assistant

Claude Code und Home Assistant per MCP verbinden

Ich zeige dir, wie du Claude Code installierst und per MCP mit Home Assistant verbindest – Geräte steuern, Zustände abfragen, Automationen schreiben.

Live Activities in Home Assistant: iPhone-Sperrbildschirm
Home Assistant

Live Activities in Home Assistant: iPhone-Sperrbildschirm

Ich zeige dir, wie du mit Home Assistant Live Activities auf dem iPhone-Sperrbildschirm und in der Dynamic Island einrichtest. Ohne HACS, nur mit YAML.

Tuya-Geräte lokal steuern: ohne Cloud, ohne Entwicklerkonto
Home Assistant

Tuya-Geräte lokal steuern: ohne Cloud, ohne Entwicklerkonto

Tuya-Geräte lokal in Home Assistant steuern – ohne Entwicklerkonto, ohne Cloud-Abhängigkeit. Ich zeige dir, wie tuya-local das heute in wenigen Schritten erledigt.

Verwandte Inhalte

Video

Bubble Card für Home Assistant: alle Card-Typen erklärt

Video

Perfekte Dashboard Karten für Waschmaschine, Trockner & mehr (WashData + Mushroom + Timer Bar)

Video

Home Assistant Automationen: Einstieg und Praxis für Smart Home

Video

Home Assistant im Langzeittest: Erfahrungen und Setup nach einem Jahr

Video

Anwesenheitssimulation im Smart Home mit Home Assistant einrichten

Video

Mushroom Person Cards und HACS 2.0: Neue Möglichkeiten für Home Assistant Dashboards

Mehr zum Thema Home Assistant Dashboard