Das Dashboard verstehen

Was ist das Dashboard?

Das Dashboard (früher „Lovelace" genannt) ist die Hauptoberfläche von Home Assistant. Hier siehst du den Status deiner Geräte und kannst sie steuern. Es besteht aus Karten (Cards), die du frei anordnen kannst — ähnlich wie Widgets auf einem Smartphone.

Das Dashboard ist vollständig anpassbar: Du kannst eigene Dashboards erstellen, verschiedene Ansichten (Tabs) für verschiedene Zwecke anlegen und sogar komplett eigene Karten mit YAML oder Custom Cards nutzen. Viele Nutzer verbringen Stunden damit, das perfekte Dashboard zu bauen — es ist wie ein kreatives Hobby!

Die Dashboard-Hierarchie

Dashboard
Ansichten (Tabs)
Sections
Karten (Cards)
Entities

Hinweis: Du kannst beliebig viele Dashboards erstellen: Eines für den Alltag, eines für Energie, eines für die Wandtablet-Montage. Jedes Dashboard erscheint als eigener Eintrag im Seitenmenü.

Aufbau des Standard-Dashboards

Wenn du Home Assistant zum ersten Mal startest, wird automatisch ein Dashboard erstellt:

Übersicht-Tab — Zeigt alle erkannten Entities gruppiert nach Raum
Räume — Jeder Raum (Area) bekommt eine eigene Gruppierung
Karten — Jedes Gerät wird als passende Karte dargestellt
Automatische Aktualisierung — Neue Geräte erscheinen automatisch

Hinweis: Das Auto-Dashboard ist praktisch zum Start, wird aber schnell unübersichtlich. Sobald du mehr als 10 Geräte hast, lohnt es sich, ein eigenes Dashboard zu erstellen und die automatische Verwaltung abzuschalten.

Eigenes Dashboard erstellen

Dashboard erstellen — Einstellungen → Dashboards → + Dashboard hinzufügen
Typ wählen — Name eingeben, Icon wählen, ob es in der Sidebar erscheinen soll
Ansichten anlegen — Tabs erstellen: Übersicht, Beleuchtung, Energie, Kameras
Karten hinzufügen — Bearbeitungsmodus → + Karte → Typ wählen und konfigurieren
Standard-Dashboard setzen — Optional: Neues Dashboard als Standard für die Sidebar festlegen

Wichtige Kartentypen im Detail

Entities Card — Die Allzweckwaffe

Zeigt mehrere Entities als kompakte Liste. Ideal für Raumübersichten.

yaml

1# Entities Card: Wohnzimmer
2type: entities
3title: Wohnzimmer
4show_header_toggle: true     # Alle gleichzeitig ein/ausschalten
5entities:
6  - entity: light.wohnzimmer_decke
7name: Deckenlampe
8  - entity: light.wohnzimmer_stehlampe
9name: Stehlampe
10  - type: divider            # Trennlinie
11  - entity: sensor.wohnzimmer_temperatur
12name: Temperatur
13icon: mdi:thermometer
14  - entity: sensor.wohnzimmer_luftfeuchtigkeit
15name: Luftfeuchtigkeit
16  - type: section             # Abschnitts-Header
17label: Steuerung
18  - entity: cover.wohnzimmer_rollladen
19name: Rollladen
20  - entity: climate.wohnzimmer_heizung
21name: Heizung

Button Card — Schnelle Aktionen

Ein großer, klickbarer Knopf für eine einzelne Aktion oder Entity.

yaml

1# Button Cards: Verschiedene Aktionen
2# Einfacher Toggle-Button
3type: button
4name: Stehlampe
5entity: light.stehlampe
6show_state: true
7icon: mdi:floor-lamp
8
9# Service-Aufruf-Button
10type: button
11name: Alles aus
12icon: mdi:power-off
13tap_action:
14  action: call-service
15  service: homeassistant.turn_off
16  target:
17area_id: wohnzimmer
18show_state: false
19
20# Navigation-Button
21type: button
22name: Kameras
23icon: mdi:cctv
24tap_action:
25  action: navigate
26  navigation_path: /lovelace-kameras/0

Gauge Card — Messwerte als Tachometer

Zeigt einen numerischen Wert als rundes Messgerät mit farbigen Bereichen.

yaml

1# Gauge Card: Luftfeuchtigkeit mit Segmenten
2type: gauge
3entity: sensor.wohnzimmer_luftfeuchtigkeit
4name: Luftfeuchtigkeit
5min: 0
6max: 100
7needle: true
8segments:
9  - from: 0
10color: "#db4437"   # Zu trocken
11  - from: 30
12color: "#ffa600"   
13  - from: 40
14color: "#43a047"   # Ideal (40-60%)
15  - from: 60
16color: "#ffa600"   
17  - from: 70
18color: "#db4437"   # Zu feucht

Thermostat Card — Heizung steuern

yaml

1# Thermostat Card mit Features
2type: thermostat
3entity: climate.wohnzimmer_heizung
4features:
5  - type: climate-hvac-modes
6hvac_modes:
7  - heat
8  - auto
9  - "off"
10  - type: climate-preset-modes
11preset_modes:
12  - eco
13  - comfort
14  - away

History Graph — Zeitverläufe

yaml

1# History Graph: Temperaturverlauf
2type: history-graph
3title: Temperaturverlauf 24h
4hours_to_show: 24
5entities:
6  - entity: sensor.wohnzimmer_temperatur
7name: Wohnzimmer
8  - entity: sensor.schlafzimmer_temperatur
9name: Schlafzimmer
10  - entity: sensor.aussen_temperatur
11name: Außen

Conditional Card — Kontextabhängig

Zeigt Inhalt nur, wenn eine Bedingung erfüllt ist — perfekt für Warnungen.

yaml

1# Conditional: Nur bei Problemen sichtbar
2type: conditional
3conditions:
4  - condition: state
5entity: binary_sensor.haustuer
6state: "on"              # Nur sichtbar wenn Tür offen
7card:
8  type: markdown
9  content: |
10## ⚠️ Haustür ist offen!
11Seit {{ relative_time(states.binary_sensor.haustuer.last_changed) }}
12
13# Oder: Warnung bei niedrigem Batteriestand
14type: conditional
15conditions:
16  - condition: numeric_state
17entity: sensor.tuersensor_battery
18below: 20
19card:
20  type: entity
21  entity: sensor.tuersensor_battery
22  name: "⚠️ Türsensor Batterie niedrig!"

Markdown Card — Dynamischer Text

yaml

1# Markdown: Status-Zusammenfassung
2type: markdown
3title: Status
4content: |
5  ## 🏠 Zuhause
6  
7  **Personen:** {{ states.person | selectattr('state', 'eq', 'home') | map(attribute='name') | join(', ') or 'Niemand' }}
8  
9  **Temperatur:** {{ states('sensor.wohnzimmer_temperatur') }}°C
10  (Außen: {{ states('sensor.aussen_temperatur') }}°C)
11  
12  **Fenster:** {{ states.binary_sensor | selectattr('attributes.device_class', 'eq', 'window') | selectattr('state', 'eq', 'on') | list | count }} offen
13  
14  **Lichter:** {{ states.light | selectattr('state', 'eq', 'on') | list | count }} eingeschaltet
15  
16  **Strom:** {{ states('sensor.aktuelle_leistung') }}W 
17  ({{ states('sensor.strom_taeglich') }} kWh heute)

Alle Standard-Kartentypen

Karte	Verwendung	Beispiel
Entities	Liste von Entities	Alle Lichter im Wohnzimmer
Button	Großer Knopf für eine Aktion	„Alles ausschalten"
Gauge	Wert als Tachometer	Luftfeuchtigkeit 65%
Thermostat	Temperatursteuerung	Heizung im Bad
Media Player	Musiksteuerung	Sonos Lautsprecher
Weather Forecast	Wettervorhersage	5-Tage-Vorhersage
History Graph	Zeitlicher Verlauf	Temperaturkurve 24h
Statistic	Min/Max/Mittelwert	Durchschnittstemperatur
Energy	Energieverteilung	Solar/Netz/Verbrauch
Map	Karte mit Standorten	Familien-Standorte
Picture Elements	Bild mit Overlays	Grundriss mit Sensoren
Markdown	Formatierter Text	Status-Zusammenfassungen
Horizontal/Vertical Stack	Layout-Container	Karten nebeneinander anordnen
Grid	Responsive Grid-Layout	Mehrere Buttons in einem Raster
Conditional	Bedingte Anzeige	Alarm nur bei offener Tür

Custom Cards (über HACS)

Die beliebtesten Dashboard-Karten kommen aus der Community und werden über HACS installiert. Sie sind moderner, flexibler und schöner als die Standard-Karten.

Mushroom Cards — Der neue Standard

Mushroom Cards sind die beliebtesten Custom Cards — minimalistisch, modern und extrem anpassbar. Fast jedes Community-Dashboard nutzt sie.

yaml

1# Mushroom Cards Beispiele
2# Mushroom Light Card (schöner als Standard)
3type: custom:mushroom-light-card
4entity: light.wohnzimmer_decke
5name: Deckenlampe
6icon: mdi:ceiling-light
7show_brightness_control: true
8show_color_control: true
9show_color_temp_control: true
10layout: horizontal
11
12# Mushroom Entity Card
13type: custom:mushroom-entity-card
14entity: sensor.wohnzimmer_temperatur
15name: Wohnzimmer
16icon: mdi:thermometer
17primary_info: state
18secondary_info: last-changed
19
20# Mushroom Chips Card (kompakte Statusleiste)
21type: custom:mushroom-chips-card
22chips:
23  - type: entity
24entity: sensor.wohnzimmer_temperatur
25icon: mdi:thermometer
26  - type: entity
27entity: sensor.aktuelle_leistung
28icon: mdi:flash
29  - type: conditional
30conditions:
31  - entity: binary_sensor.haustuer
32    state: "on"
33chip:
34  type: entity
35  entity: binary_sensor.haustuer
36  icon: mdi:door-open
37  icon_color: red
38
39# Mushroom Person Card
40type: custom:mushroom-person-card
41entity: person.max
42layout: horizontal
43primary_info: state
44secondary_info: last-changed
45icon_type: entity-picture
46
47# Mushroom Climate Card
48type: custom:mushroom-climate-card
49entity: climate.wohnzimmer
50show_temperature_control: true
51hvac_modes:
52  - heat
53  - auto
54  - "off"

Weitere beliebte Custom Cards

ApexCharts Card — Fortgeschrittene Diagramme: Balken, Linien, Flächen, Radial — alles möglich
Mini Graph Card — Kompakte Inline-Graphen direkt in Entity-Cards
Floor Plan Card — Interaktiver Grundriss mit Geräte-Overlays — das ultimative Dashboard
Stack-in-Card — Entfernt den Rahmen um Stacks — für nahtlose Layouts
Card Mod — CSS-Styling für JEDE Karte — Farben, Animationen, Bedingungen
Auto Entities — Automatisch Entities nach Kriterien filtern und anzeigen

yaml

1# ApexCharts: Temperaturverlauf (7 Tage)
2type: custom:apexcharts-card
3header:
4  title: Temperaturverlauf
5  show: true
6graph_span: 7d
7series:
8  - entity: sensor.wohnzimmer_temperatur
9name: Wohnzimmer
10color: "#F44336"
11stroke_width: 2
12  - entity: sensor.schlafzimmer_temperatur
13name: Schlafzimmer
14color: "#2196F3"
15stroke_width: 2
16  - entity: sensor.aussen_temperatur
17name: Außen
18color: "#4CAF50"
19stroke_width: 1
20opacity: 0.5
21apex_config:
22  chart:
23height: 200
24  xaxis:
25labels:
26  format: "dd.MM"

Dashboard bearbeiten — Schritt für Schritt

Bearbeitungsmodus öffnen — Klicke oben rechts auf die drei Punkte, dann auf Dashboard bearbeiten
Karte hinzufügen — Klicke auf das Plus-Symbol, wähle einen Kartentyp und konfiguriere die Karte
Karten anordnen — Ziehe Karten per Drag & Drop an die gewünschte Position
Karte bearbeiten — Klicke auf das Stift-Symbol einer Karte und ändere Einstellungen
YAML-Editor nutzen — Klicke auf Code-Editor anzeigen für volle Kontrolle über die Konfiguration
Speichern — Klicke oben rechts auf Fertig — Änderungen werden sofort gespeichert

Ansichten (Tabs) erstellen

Ansichten sind die Tabs innerhalb eines Dashboards. Jede Ansicht hat ein eigenes Icon, einen Titel und enthält eigene Karten.

Übersicht — Wichtigste Geräte, Wetter, Personen, Schnellzugriff
Beleuchtung — Alle Lichter nach Raum gruppiert, Szenen-Buttons
Energie — Verbrauch, Solar, Kosten, Top-Verbraucher
Kameras — Live-Streams aller Kameras in einem Grid
Klima — Thermostate, Temperatur, Luftfeuchtigkeit pro Raum
System — Server-Status, Updates, Netzwerk, Batteriestände

Ansichtstypen

Typ	Beschreibung	Am besten für
Masonry (Standard)	Karten füllen Lücken wie Mauersteine	Allgemeine Übersichten
Sections (Neu!)	Drag & Drop mit Spalten und Gruppen	⭐ Strukturierte Layouts (empfohlen)
Sidebar	Breite Spalte + schmale Seitenleiste	Dashboard + Schnellzugriff
Panel	Eine Karte füllt die gesamte Seite	Kamera-Vollbild, Grundriss

Themes installieren und anpassen

Themes ändern das komplette Aussehen von Home Assistant — Farben, Schriftarten, Abstände. Viele Themes sind über HACS verfügbar.

Beliebte Themes

Catppuccin — Modernes Farbschema in 4 Varianten (Latte, Frappé, Macchiato, Mocha)
Mushroom Shadow — Perfekt abgestimmt auf Mushroom Cards mit Schatten-Effekten
Slate Theme — Dunkles, minimalistisches Theme mit klarem Design
Google Theme — Sieht aus wie die Google Home App

yaml

1# Eigenes Theme erstellen
2# themes.yaml (per !include einbinden)
3mein_theme:
4  # Grundfarben
5  primary-color: "#1E88E5"           # Hauptfarbe
6  accent-color: "#FF6F00"            # Akzentfarbe
7  
8  # Hintergrund
9  lovelace-background: "center / cover no-repeat url('/local/bg.jpg')"
10  
11  # Karten
12  ha-card-background: "rgba(30, 30, 30, 0.8)"
13  ha-card-border-radius: "16px"
14  ha-card-box-shadow: "0 4px 20px rgba(0,0,0,0.3)"
15  
16  # Sidebar
17  sidebar-background-color: "#1a1a2e"
18  sidebar-text-color: "#e0e0e0"
19  
20  # Header
21  app-header-background-color: "#16213e"
22
23# Theme pro Benutzer setzen:
24# Profil > Theme > mein_theme
25
26# Theme per Automation wechseln:
27automation:
28  - alias: "Dark Mode nach Sonnenuntergang"
29trigger:
30  - platform: sun
31    event: sunset
32action:
33  - service: frontend.set_theme
34    data:
35      name: mein_dark_theme

Räume (Areas) einrichten

Räume helfen dir, Geräte logisch zu gruppieren. Das Dashboard sortiert dann automatisch nach Raum und du kannst in Automationen „Alle Lichter im Wohnzimmer" ansprechen.

Gehe zu Einstellungen → Bereiche & Zonen
Klicke auf „+ Bereich erstellen"
Gib einen Namen ein (z.B. „Wohnzimmer")
Optional: Bild hochladen, Stockwerk zuweisen
Weise Geräte dem Raum zu: Geräte-Einstellungen → Bereich → Wohnzimmer

Hinweis: Erstelle Räume für jeden physischen Raum und zusätzlich für Bereiche wie „Garten", „Garage", „Dachboden". Auch „Infrastruktur" (für Router, Server, NAS) ist ein nützlicher Bereich. Nutze Stockwerke für die Gruppierung im neuen Sections-Layout.

Praktische Dashboard-Beispiele

Beispiel: Kompakte Raumübersicht mit Mushroom

yaml

1# Sections-Layout: Modernes Wohnzimmer
2type: vertical-stack
3cards:
4  # Titel mit Temperatur
5  - type: custom:mushroom-title-card
6title: Wohnzimmer
7subtitle: "{{ states('sensor.wohnzimmer_temperatur') }}°C · {{ states('sensor.wohnzimmer_luftfeuchtigkeit') }}%"
8
9  # Chips für Schnellstatus
10  - type: custom:mushroom-chips-card
11chips:
12  - type: entity
13    entity: sensor.wohnzimmer_temperatur
14    icon: mdi:thermometer
15  - type: entity
16    entity: sensor.aktuelle_leistung
17    icon: mdi:flash
18  - type: conditional
19    conditions:
20      - entity: binary_sensor.wohnzimmer_fenster
21        state: "on"
22    chip:
23      type: template
24      icon: mdi:window-open
25      icon_color: orange
26      content: "Fenster offen"
27      
28  # Geräte-Grid
29  - type: grid
30columns: 3
31square: false
32cards:
33  - type: custom:mushroom-light-card
34    entity: light.decke
35    name: Decke
36    layout: vertical
37    show_brightness_control: true
38  - type: custom:mushroom-light-card
39    entity: light.stehlampe
40    name: Stehlampe
41    layout: vertical
42  - type: custom:mushroom-entity-card
43    entity: cover.rollladen
44    name: Rollladen
45    layout: vertical

Beispiel: Status-Dashboard für Wandtablet

yaml

1# Minimalistische Tablet-Übersicht
2type: vertical-stack
3cards:
4  - type: weather-forecast
5entity: weather.home
6show_forecast: true
7forecast_type: daily
8  - type: horizontal-stack
9cards:
10  - type: gauge
11    entity: sensor.innentemperatur
12    name: Innen
13    min: 15
14    max: 30
15    needle: true
16    segments:
17      - from: 15
18        color: "#2196F3"
19      - from: 20
20        color: "#4CAF50"
21      - from: 26
22        color: "#FF9800"
23  - type: gauge
24    entity: sensor.luftfeuchtigkeit
25    name: Feuchte
26    min: 0
27    max: 100
28    needle: true
29  - type: entities
30entities:
31  - entity: binary_sensor.haustuer
32    name: Haustür
33  - entity: binary_sensor.fenster_wohnzimmer
34    name: Fenster WZ
35  - entity: alarm_control_panel.alarm
36    name: Alarmanlage
37  # Nur sichtbar wenn Probleme
38  - type: conditional
39conditions:
40  - condition: numeric_state
41    entity: sensor.batterie_niedrig_count
42    above: 0
43card:
44  type: markdown
45  content: "⚠️ {{ states('sensor.batterie_niedrig_count') }} Geräte mit niedrigem Akku"

Beispiel: Picture Elements (Grundriss)

yaml

1# Grundriss mit Sensor-Overlays
2type: picture-elements
3image: /local/grundriss.png      # Grundriss als Bild
4elements:
5  # Temperatur-Anzeige positioniert
6  - type: state-label
7entity: sensor.wohnzimmer_temperatur
8style:
9  top: "30%"
10  left: "40%"
11  font-size: "14px"
12  color: white
13  
14  # Licht-Icon (klickbar)
15  - type: state-icon
16entity: light.wohnzimmer
17tap_action:
18  action: toggle
19style:
20  top: "35%"
21  left: "45%"
22  
23  # Tür-Status
24  - type: state-icon
25entity: binary_sensor.haustuer
26style:
27  top: "80%"
28  left: "50%"
29  "--iron-icon-fill-color": >
30    {{ 'red' if is_state('binary_sensor.haustuer', 'on') else 'green' }}

Tipps für ein großartiges Dashboard

Weniger ist mehr — Zeige nur Entities, die du täglich brauchst. Verstecke den Rest in Unterseiten.
Tabs nutzen — Erstelle Ansichten: Übersicht, Energie, Kamera, System — nicht alles auf eine Seite
Custom Cards — Mushroom Cards über HACS sind der moderne Standard — installiere sie als Erstes
Mobile testen — Prüfe das Dashboard auf dem Handy — nicht nur am PC. Mobile ist 70% der Nutzung!
Grundriss nutzen — Picture Elements Card mit Wohnungsgrundriss — das beeindruckendste Dashboard
Conditional Cards — Zeige Warnungen nur wenn nötig — sauberer und übersichtlicher

Hinweis: Schau dir die Community-Dashboards auf Reddit (r/homeassistant) an. Viele Nutzer teilen ihre Setups mit Screenshots und YAML-Code. Besonders beliebt: Mushroom Cards + Custom Themes + Picture Elements Grundriss.

Weiter: Für fortgeschrittene Dashboard-Anpassungen mit Custom Cards und Themes → Dashboard & UI Guide

Was ist das Dashboard?

Die Dashboard-Hierarchie

Dashboard
Ansichten (Tabs)
Sections
Karten (Cards)
Entities

Hinweis: Du kannst beliebig viele Dashboards erstellen: Eines für den Alltag, eines für Energie, eines für die Wandtablet-Montage. Jedes Dashboard erscheint als eigener Eintrag im Seitenmenü.

Aufbau des Standard-Dashboards

Wenn du Home Assistant zum ersten Mal startest, wird automatisch ein Dashboard erstellt:

Übersicht-Tab — Zeigt alle erkannten Entities gruppiert nach Raum
Räume — Jeder Raum (Area) bekommt eine eigene Gruppierung
Karten — Jedes Gerät wird als passende Karte dargestellt
Automatische Aktualisierung — Neue Geräte erscheinen automatisch

Hinweis: Das Auto-Dashboard ist praktisch zum Start, wird aber schnell unübersichtlich. Sobald du mehr als 10 Geräte hast, lohnt es sich, ein eigenes Dashboard zu erstellen und die automatische Verwaltung abzuschalten.

Eigenes Dashboard erstellen

Dashboard erstellen — Einstellungen → Dashboards → + Dashboard hinzufügen
Typ wählen — Name eingeben, Icon wählen, ob es in der Sidebar erscheinen soll
Ansichten anlegen — Tabs erstellen: Übersicht, Beleuchtung, Energie, Kameras
Karten hinzufügen — Bearbeitungsmodus → + Karte → Typ wählen und konfigurieren
Standard-Dashboard setzen — Optional: Neues Dashboard als Standard für die Sidebar festlegen

Wichtige Kartentypen im Detail

Entities Card — Die Allzweckwaffe

Zeigt mehrere Entities als kompakte Liste. Ideal für Raumübersichten.

yaml

1# Entities Card: Wohnzimmer
2type: entities
3title: Wohnzimmer
4show_header_toggle: true     # Alle gleichzeitig ein/ausschalten
5entities:
6  - entity: light.wohnzimmer_decke
7name: Deckenlampe
8  - entity: light.wohnzimmer_stehlampe
9name: Stehlampe
10  - type: divider            # Trennlinie
11  - entity: sensor.wohnzimmer_temperatur
12name: Temperatur
13icon: mdi:thermometer
14  - entity: sensor.wohnzimmer_luftfeuchtigkeit
15name: Luftfeuchtigkeit
16  - type: section             # Abschnitts-Header
17label: Steuerung
18  - entity: cover.wohnzimmer_rollladen
19name: Rollladen
20  - entity: climate.wohnzimmer_heizung
21name: Heizung

Button Card — Schnelle Aktionen

Ein großer, klickbarer Knopf für eine einzelne Aktion oder Entity.

yaml

1# Button Cards: Verschiedene Aktionen
2# Einfacher Toggle-Button
3type: button
4name: Stehlampe
5entity: light.stehlampe
6show_state: true
7icon: mdi:floor-lamp
8
9# Service-Aufruf-Button
10type: button
11name: Alles aus
12icon: mdi:power-off
13tap_action:
14  action: call-service
15  service: homeassistant.turn_off
16  target:
17area_id: wohnzimmer
18show_state: false
19
20# Navigation-Button
21type: button
22name: Kameras
23icon: mdi:cctv
24tap_action:
25  action: navigate
26  navigation_path: /lovelace-kameras/0

Gauge Card — Messwerte als Tachometer

Zeigt einen numerischen Wert als rundes Messgerät mit farbigen Bereichen.

yaml

1# Gauge Card: Luftfeuchtigkeit mit Segmenten
2type: gauge
3entity: sensor.wohnzimmer_luftfeuchtigkeit
4name: Luftfeuchtigkeit
5min: 0
6max: 100
7needle: true
8segments:
9  - from: 0
10color: "#db4437"   # Zu trocken
11  - from: 30
12color: "#ffa600"   
13  - from: 40
14color: "#43a047"   # Ideal (40-60%)
15  - from: 60
16color: "#ffa600"   
17  - from: 70
18color: "#db4437"   # Zu feucht

Thermostat Card — Heizung steuern

yaml

1# Thermostat Card mit Features
2type: thermostat
3entity: climate.wohnzimmer_heizung
4features:
5  - type: climate-hvac-modes
6hvac_modes:
7  - heat
8  - auto
9  - "off"
10  - type: climate-preset-modes
11preset_modes:
12  - eco
13  - comfort
14  - away

History Graph — Zeitverläufe

yaml

1# History Graph: Temperaturverlauf
2type: history-graph
3title: Temperaturverlauf 24h
4hours_to_show: 24
5entities:
6  - entity: sensor.wohnzimmer_temperatur
7name: Wohnzimmer
8  - entity: sensor.schlafzimmer_temperatur
9name: Schlafzimmer
10  - entity: sensor.aussen_temperatur
11name: Außen

Conditional Card — Kontextabhängig

Zeigt Inhalt nur, wenn eine Bedingung erfüllt ist — perfekt für Warnungen.

yaml

1# Conditional: Nur bei Problemen sichtbar
2type: conditional
3conditions:
4  - condition: state
5entity: binary_sensor.haustuer
6state: "on"              # Nur sichtbar wenn Tür offen
7card:
8  type: markdown
9  content: |
10## ⚠️ Haustür ist offen!
11Seit {{ relative_time(states.binary_sensor.haustuer.last_changed) }}
12
13# Oder: Warnung bei niedrigem Batteriestand
14type: conditional
15conditions:
16  - condition: numeric_state
17entity: sensor.tuersensor_battery
18below: 20
19card:
20  type: entity
21  entity: sensor.tuersensor_battery
22  name: "⚠️ Türsensor Batterie niedrig!"

Markdown Card — Dynamischer Text

yaml

1# Markdown: Status-Zusammenfassung
2type: markdown
3title: Status
4content: |
5  ## 🏠 Zuhause
6  
7  **Personen:** {{ states.person | selectattr('state', 'eq', 'home') | map(attribute='name') | join(', ') or 'Niemand' }}
8  
9  **Temperatur:** {{ states('sensor.wohnzimmer_temperatur') }}°C
10  (Außen: {{ states('sensor.aussen_temperatur') }}°C)
11  
12  **Fenster:** {{ states.binary_sensor | selectattr('attributes.device_class', 'eq', 'window') | selectattr('state', 'eq', 'on') | list | count }} offen
13  
14  **Lichter:** {{ states.light | selectattr('state', 'eq', 'on') | list | count }} eingeschaltet
15  
16  **Strom:** {{ states('sensor.aktuelle_leistung') }}W 
17  ({{ states('sensor.strom_taeglich') }} kWh heute)

Alle Standard-Kartentypen

Karte	Verwendung	Beispiel
Entities	Liste von Entities	Alle Lichter im Wohnzimmer
Button	Großer Knopf für eine Aktion	„Alles ausschalten"
Gauge	Wert als Tachometer	Luftfeuchtigkeit 65%
Thermostat	Temperatursteuerung	Heizung im Bad
Media Player	Musiksteuerung	Sonos Lautsprecher
Weather Forecast	Wettervorhersage	5-Tage-Vorhersage
History Graph	Zeitlicher Verlauf	Temperaturkurve 24h
Statistic	Min/Max/Mittelwert	Durchschnittstemperatur
Energy	Energieverteilung	Solar/Netz/Verbrauch
Map	Karte mit Standorten	Familien-Standorte
Picture Elements	Bild mit Overlays	Grundriss mit Sensoren
Markdown	Formatierter Text	Status-Zusammenfassungen
Horizontal/Vertical Stack	Layout-Container	Karten nebeneinander anordnen
Grid	Responsive Grid-Layout	Mehrere Buttons in einem Raster
Conditional	Bedingte Anzeige	Alarm nur bei offener Tür

Custom Cards (über HACS)

Die beliebtesten Dashboard-Karten kommen aus der Community und werden über HACS installiert. Sie sind moderner, flexibler und schöner als die Standard-Karten.

Mushroom Cards — Der neue Standard

Mushroom Cards sind die beliebtesten Custom Cards — minimalistisch, modern und extrem anpassbar. Fast jedes Community-Dashboard nutzt sie.

yaml

1# Mushroom Cards Beispiele
2# Mushroom Light Card (schöner als Standard)
3type: custom:mushroom-light-card
4entity: light.wohnzimmer_decke
5name: Deckenlampe
6icon: mdi:ceiling-light
7show_brightness_control: true
8show_color_control: true
9show_color_temp_control: true
10layout: horizontal
11
12# Mushroom Entity Card
13type: custom:mushroom-entity-card
14entity: sensor.wohnzimmer_temperatur
15name: Wohnzimmer
16icon: mdi:thermometer
17primary_info: state
18secondary_info: last-changed
19
20# Mushroom Chips Card (kompakte Statusleiste)
21type: custom:mushroom-chips-card
22chips:
23  - type: entity
24entity: sensor.wohnzimmer_temperatur
25icon: mdi:thermometer
26  - type: entity
27entity: sensor.aktuelle_leistung
28icon: mdi:flash
29  - type: conditional
30conditions:
31  - entity: binary_sensor.haustuer
32    state: "on"
33chip:
34  type: entity
35  entity: binary_sensor.haustuer
36  icon: mdi:door-open
37  icon_color: red
38
39# Mushroom Person Card
40type: custom:mushroom-person-card
41entity: person.max
42layout: horizontal
43primary_info: state
44secondary_info: last-changed
45icon_type: entity-picture
46
47# Mushroom Climate Card
48type: custom:mushroom-climate-card
49entity: climate.wohnzimmer
50show_temperature_control: true
51hvac_modes:
52  - heat
53  - auto
54  - "off"

Weitere beliebte Custom Cards

ApexCharts Card — Fortgeschrittene Diagramme: Balken, Linien, Flächen, Radial — alles möglich
Mini Graph Card — Kompakte Inline-Graphen direkt in Entity-Cards
Floor Plan Card — Interaktiver Grundriss mit Geräte-Overlays — das ultimative Dashboard
Stack-in-Card — Entfernt den Rahmen um Stacks — für nahtlose Layouts
Card Mod — CSS-Styling für JEDE Karte — Farben, Animationen, Bedingungen
Auto Entities — Automatisch Entities nach Kriterien filtern und anzeigen

yaml

1# ApexCharts: Temperaturverlauf (7 Tage)
2type: custom:apexcharts-card
3header:
4  title: Temperaturverlauf
5  show: true
6graph_span: 7d
7series:
8  - entity: sensor.wohnzimmer_temperatur
9name: Wohnzimmer
10color: "#F44336"
11stroke_width: 2
12  - entity: sensor.schlafzimmer_temperatur
13name: Schlafzimmer
14color: "#2196F3"
15stroke_width: 2
16  - entity: sensor.aussen_temperatur
17name: Außen
18color: "#4CAF50"
19stroke_width: 1
20opacity: 0.5
21apex_config:
22  chart:
23height: 200
24  xaxis:
25labels:
26  format: "dd.MM"

Dashboard bearbeiten — Schritt für Schritt

Bearbeitungsmodus öffnen — Klicke oben rechts auf die drei Punkte, dann auf Dashboard bearbeiten
Karte hinzufügen — Klicke auf das Plus-Symbol, wähle einen Kartentyp und konfiguriere die Karte
Karten anordnen — Ziehe Karten per Drag & Drop an die gewünschte Position
Karte bearbeiten — Klicke auf das Stift-Symbol einer Karte und ändere Einstellungen
YAML-Editor nutzen — Klicke auf Code-Editor anzeigen für volle Kontrolle über die Konfiguration
Speichern — Klicke oben rechts auf Fertig — Änderungen werden sofort gespeichert

Ansichten (Tabs) erstellen

Ansichten sind die Tabs innerhalb eines Dashboards. Jede Ansicht hat ein eigenes Icon, einen Titel und enthält eigene Karten.

Übersicht — Wichtigste Geräte, Wetter, Personen, Schnellzugriff
Beleuchtung — Alle Lichter nach Raum gruppiert, Szenen-Buttons
Energie — Verbrauch, Solar, Kosten, Top-Verbraucher
Kameras — Live-Streams aller Kameras in einem Grid
Klima — Thermostate, Temperatur, Luftfeuchtigkeit pro Raum
System — Server-Status, Updates, Netzwerk, Batteriestände

Ansichtstypen

Typ	Beschreibung	Am besten für
Masonry (Standard)	Karten füllen Lücken wie Mauersteine	Allgemeine Übersichten
Sections (Neu!)	Drag & Drop mit Spalten und Gruppen	⭐ Strukturierte Layouts (empfohlen)
Sidebar	Breite Spalte + schmale Seitenleiste	Dashboard + Schnellzugriff
Panel	Eine Karte füllt die gesamte Seite	Kamera-Vollbild, Grundriss

Themes installieren und anpassen

Themes ändern das komplette Aussehen von Home Assistant — Farben, Schriftarten, Abstände. Viele Themes sind über HACS verfügbar.

Beliebte Themes

Catppuccin — Modernes Farbschema in 4 Varianten (Latte, Frappé, Macchiato, Mocha)
Mushroom Shadow — Perfekt abgestimmt auf Mushroom Cards mit Schatten-Effekten
Slate Theme — Dunkles, minimalistisches Theme mit klarem Design
Google Theme — Sieht aus wie die Google Home App

yaml

1# Eigenes Theme erstellen
2# themes.yaml (per !include einbinden)
3mein_theme:
4  # Grundfarben
5  primary-color: "#1E88E5"           # Hauptfarbe
6  accent-color: "#FF6F00"            # Akzentfarbe
7  
8  # Hintergrund
9  lovelace-background: "center / cover no-repeat url('/local/bg.jpg')"
10  
11  # Karten
12  ha-card-background: "rgba(30, 30, 30, 0.8)"
13  ha-card-border-radius: "16px"
14  ha-card-box-shadow: "0 4px 20px rgba(0,0,0,0.3)"
15  
16  # Sidebar
17  sidebar-background-color: "#1a1a2e"
18  sidebar-text-color: "#e0e0e0"
19  
20  # Header
21  app-header-background-color: "#16213e"
22
23# Theme pro Benutzer setzen:
24# Profil > Theme > mein_theme
25
26# Theme per Automation wechseln:
27automation:
28  - alias: "Dark Mode nach Sonnenuntergang"
29trigger:
30  - platform: sun
31    event: sunset
32action:
33  - service: frontend.set_theme
34    data:
35      name: mein_dark_theme

Räume (Areas) einrichten

Räume helfen dir, Geräte logisch zu gruppieren. Das Dashboard sortiert dann automatisch nach Raum und du kannst in Automationen „Alle Lichter im Wohnzimmer" ansprechen.

Gehe zu Einstellungen → Bereiche & Zonen
Klicke auf „+ Bereich erstellen"
Gib einen Namen ein (z.B. „Wohnzimmer")
Optional: Bild hochladen, Stockwerk zuweisen
Weise Geräte dem Raum zu: Geräte-Einstellungen → Bereich → Wohnzimmer

Hinweis: Erstelle Räume für jeden physischen Raum und zusätzlich für Bereiche wie „Garten", „Garage", „Dachboden". Auch „Infrastruktur" (für Router, Server, NAS) ist ein nützlicher Bereich. Nutze Stockwerke für die Gruppierung im neuen Sections-Layout.

Praktische Dashboard-Beispiele

Beispiel: Kompakte Raumübersicht mit Mushroom

yaml

1# Sections-Layout: Modernes Wohnzimmer
2type: vertical-stack
3cards:
4  # Titel mit Temperatur
5  - type: custom:mushroom-title-card
6title: Wohnzimmer
7subtitle: "{{ states('sensor.wohnzimmer_temperatur') }}°C · {{ states('sensor.wohnzimmer_luftfeuchtigkeit') }}%"
8
9  # Chips für Schnellstatus
10  - type: custom:mushroom-chips-card
11chips:
12  - type: entity
13    entity: sensor.wohnzimmer_temperatur
14    icon: mdi:thermometer
15  - type: entity
16    entity: sensor.aktuelle_leistung
17    icon: mdi:flash
18  - type: conditional
19    conditions:
20      - entity: binary_sensor.wohnzimmer_fenster
21        state: "on"
22    chip:
23      type: template
24      icon: mdi:window-open
25      icon_color: orange
26      content: "Fenster offen"
27      
28  # Geräte-Grid
29  - type: grid
30columns: 3
31square: false
32cards:
33  - type: custom:mushroom-light-card
34    entity: light.decke
35    name: Decke
36    layout: vertical
37    show_brightness_control: true
38  - type: custom:mushroom-light-card
39    entity: light.stehlampe
40    name: Stehlampe
41    layout: vertical
42  - type: custom:mushroom-entity-card
43    entity: cover.rollladen
44    name: Rollladen
45    layout: vertical

Beispiel: Status-Dashboard für Wandtablet

yaml

1# Minimalistische Tablet-Übersicht
2type: vertical-stack
3cards:
4  - type: weather-forecast
5entity: weather.home
6show_forecast: true
7forecast_type: daily
8  - type: horizontal-stack
9cards:
10  - type: gauge
11    entity: sensor.innentemperatur
12    name: Innen
13    min: 15
14    max: 30
15    needle: true
16    segments:
17      - from: 15
18        color: "#2196F3"
19      - from: 20
20        color: "#4CAF50"
21      - from: 26
22        color: "#FF9800"
23  - type: gauge
24    entity: sensor.luftfeuchtigkeit
25    name: Feuchte
26    min: 0
27    max: 100
28    needle: true
29  - type: entities
30entities:
31  - entity: binary_sensor.haustuer
32    name: Haustür
33  - entity: binary_sensor.fenster_wohnzimmer
34    name: Fenster WZ
35  - entity: alarm_control_panel.alarm
36    name: Alarmanlage
37  # Nur sichtbar wenn Probleme
38  - type: conditional
39conditions:
40  - condition: numeric_state
41    entity: sensor.batterie_niedrig_count
42    above: 0
43card:
44  type: markdown
45  content: "⚠️ {{ states('sensor.batterie_niedrig_count') }} Geräte mit niedrigem Akku"

Beispiel: Picture Elements (Grundriss)

yaml

1# Grundriss mit Sensor-Overlays
2type: picture-elements
3image: /local/grundriss.png      # Grundriss als Bild
4elements:
5  # Temperatur-Anzeige positioniert
6  - type: state-label
7entity: sensor.wohnzimmer_temperatur
8style:
9  top: "30%"
10  left: "40%"
11  font-size: "14px"
12  color: white
13  
14  # Licht-Icon (klickbar)
15  - type: state-icon
16entity: light.wohnzimmer
17tap_action:
18  action: toggle
19style:
20  top: "35%"
21  left: "45%"
22  
23  # Tür-Status
24  - type: state-icon
25entity: binary_sensor.haustuer
26style:
27  top: "80%"
28  left: "50%"
29  "--iron-icon-fill-color": >
30    {{ 'red' if is_state('binary_sensor.haustuer', 'on') else 'green' }}

Tipps für ein großartiges Dashboard

Weniger ist mehr — Zeige nur Entities, die du täglich brauchst. Verstecke den Rest in Unterseiten.
Tabs nutzen — Erstelle Ansichten: Übersicht, Energie, Kamera, System — nicht alles auf eine Seite
Custom Cards — Mushroom Cards über HACS sind der moderne Standard — installiere sie als Erstes
Mobile testen — Prüfe das Dashboard auf dem Handy — nicht nur am PC. Mobile ist 70% der Nutzung!
Grundriss nutzen — Picture Elements Card mit Wohnungsgrundriss — das beeindruckendste Dashboard
Conditional Cards — Zeige Warnungen nur wenn nötig — sauberer und übersichtlicher

Hinweis: Schau dir die Community-Dashboards auf Reddit (r/homeassistant) an. Viele Nutzer teilen ihre Setups mit Screenshots und YAML-Code. Besonders beliebt: Mushroom Cards + Custom Themes + Picture Elements Grundriss.

Weiter: Für fortgeschrittene Dashboard-Anpassungen mit Custom Cards und Themes → Dashboard & UI Guide

Was ist das Dashboard?

Die Dashboard-Hierarchie

Aufbau des Standard-Dashboards

Eigenes Dashboard erstellen

Wichtige Kartentypen im Detail

Entities Card — Die Allzweckwaffe

Button Card — Schnelle Aktionen

Gauge Card — Messwerte als Tachometer

Thermostat Card — Heizung steuern

History Graph — Zeitverläufe

Conditional Card — Kontextabhängig

Markdown Card — Dynamischer Text

Alle Standard-Kartentypen

Custom Cards (über HACS)

Mushroom Cards — Der neue Standard

Weitere beliebte Custom Cards

Dashboard bearbeiten — Schritt für Schritt

Ansichten (Tabs) erstellen

Ansichtstypen

Themes installieren und anpassen

Beliebte Themes

Räume (Areas) einrichten

Praktische Dashboard-Beispiele

Beispiel: Kompakte Raumübersicht mit Mushroom

Beispiel: Status-Dashboard für Wandtablet

Beispiel: Picture Elements (Grundriss)

Tipps für ein großartiges Dashboard

Passende Videos

DOOM im Home Assistant Dashboard: Installation und technische Einordnung

Smart-Home-Dashboard mit KI und React nachbauen: Technischer Erfahrungsbericht

Die 5 wichtigsten HACS-Integrationen für Home Assistant im Überblick

Verwandte Inhalte

Was ist das Dashboard?

Die Dashboard-Hierarchie

Aufbau des Standard-Dashboards

Eigenes Dashboard erstellen

Wichtige Kartentypen im Detail

Entities Card — Die Allzweckwaffe

Button Card — Schnelle Aktionen

Gauge Card — Messwerte als Tachometer

Thermostat Card — Heizung steuern

History Graph — Zeitverläufe

Conditional Card — Kontextabhängig

Markdown Card — Dynamischer Text

Alle Standard-Kartentypen

Custom Cards (über HACS)

Mushroom Cards — Der neue Standard

Weitere beliebte Custom Cards

Dashboard bearbeiten — Schritt für Schritt

Ansichten (Tabs) erstellen

Ansichtstypen

Themes installieren und anpassen

Beliebte Themes

Räume (Areas) einrichten

Praktische Dashboard-Beispiele

Beispiel: Kompakte Raumübersicht mit Mushroom

Beispiel: Status-Dashboard für Wandtablet

Beispiel: Picture Elements (Grundriss)

Tipps für ein großartiges Dashboard

Passende Videos

DOOM im Home Assistant Dashboard: Installation und technische Einordnung

Smart-Home-Dashboard mit KI und React nachbauen: Technischer Erfahrungsbericht

Die 5 wichtigsten HACS-Integrationen für Home Assistant im Überblick

Verwandte Inhalte