Dashboard & UI
Eigenes Dashboard erstellen, Custom Cards nutzen und Themes installieren.
Überblick: Das Dashboard in Home Assistant
Home Assistant erstellt automatisch ein Dashboard mit allen erkannten Geräten. Aber die wahre Staerke 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
| Strategie | Beschreibung | Am besten für |
|---|---|---|
| Auto-Dashboard | HA erstellt und aktualisiert automatisch | Einsteiger, schneller Start |
| Manuelles Dashboard | Du baust alles selbst per UI-Editor | Die meisten Nutzer |
| YAML-Dashboard | Vollständige Kontrolle über YAML | Power-User, Versionierung |
| Sections-Dashboard | Neues Section-Layout (ab 2024.x) | Moderne, flexible Layouts |
Eigenes Dashboard erstellen
- Dashboard anlegen — Einstellungen, Dashboards, + Dashboard hinzufügen
- Name vergeben — Einen Namen eingeben (z.B. Mein Dashboard) und im Seitenmenue anzeigen wählen
- Bearbeiten öffnen — Das neue Dashboard öffnen, drei Punkte, Dashboard bearbeiten
- Ansichten erstellen — Tabs hinzufügen: Übersicht, Energie, Kameras, System
- Karten hinzufügen — In jeder Ansicht Karten hinzufügen mit dem Plus-Button
- Fertig — Klicke auf Fertig um den Bearbeitungsmodus zu verlassen
Eingebaute Kartentypen — Die wichtigsten
Entities Card — Der Alleskoenner
1# Entities Card mit verschiedenen Typen
2type: entities
3title: "Wohnzimmer"
4show_header_toggle: true
5entities:
6 - entity: light.wohnzimmer
7name: Deckenlampe
8 - entity: light.stehlampe
9name: Stehlampe
10 - type: divider
11 - entity: sensor.wohnzimmer_temperatur
12name: Temperatur
13icon: mdi:thermometer
14 - entity: sensor.wohnzimmer_luftfeuchtigkeit
15name: Luftfeuchtigkeit
16 - type: divider
17 - entity: media_player.sonos_wohnzimmer
18name: Sonos
19 - type: button
20name: "Alles aus"
21icon: mdi:power
22action_name: Ausschalten
23tap_action:
24 action: call-service
25 service: homeassistant.turn_off
26 target:
27 area_id: wohnzimmerGauge Card — Werte visuell darstellen
1# Gauge Card mit Farbzonen
2type: gauge
3entity: sensor.cpu_temperatur
4name: "Server CPU"
5min: 20
6max: 100
7needle: true
8severity:
9 green: 20
10 yellow: 60
11 red: 80
12
13# Oder als Segment-Gauge:
14type: gauge
15entity: sensor.luftqualitaet
16name: "CO2 Wohnzimmer"
17unit: "ppm"
18min: 400
19max: 2000
20segments:
21 - from: 400
22color: "#43A047"
23label: "Gut"
24 - from: 800
25color: "#FFC107"
26label: "Maessig"
27 - from: 1200
28color: "#FF5722"
29label: "Schlecht"
30 - from: 1600
31color: "#D32F2F"
32label: "Lueften!"Neu in 2026.4: Die Gauge Card hat ein modernes Redesign bekommen. Cleaner Look, gleiche Funktionalität mit Needle und Severity-Segmenten. Falls dein Dashboard nach dem Update anders aussieht, liegt es daran.
Conditional Card — Dynamisch ein/ausblenden
1# Conditional Card: Nur bei Bedarf anzeigen
2# Zeige nur wenn die Haustuer offen ist:
3type: conditional
4conditions:
5 - condition: state
6entity: binary_sensor.haustuer
7state: "on"
8card:
9 type: markdown
10 content: >
11## Die Haustuer ist offen!
12Seit {{ relative_time(states.binary_sensor.haustuer.last_changed) }}.
13
14# Zeige nur bei Regen:
15type: conditional
16conditions:
17 - condition: state
18entity: weather.home
19state: "rainy"
20card:
21 type: entity
22 entity: weather.home
23 name: "Es regnet!"Grid Card — Kompaktes Layout
1# Grid Card für kompakte Übersicht
2type: grid
3columns: 3
4square: false
5cards:
6 - type: button
7entity: light.wohnzimmer
8name: Wohnzimmer
9show_state: true
10tap_action:
11 action: toggle
12 - type: button
13entity: light.kueche
14name: Küche
15show_state: true
16tap_action:
17 action: toggle
18 - type: button
19entity: light.schlafzimmer
20name: Schlafzimmer
21show_state: true
22tap_action:
23 action: toggle
24 - type: button
25entity: cover.rolladen_wz
26name: Rollladen
27icon: mdi:blinds
28 - type: button
29entity: lock.haustuer
30name: Haustuer
31 - type: button
32entity: vacuum.roborock
33name: StaubsaugerCustom Cards über HACS — Die Besten im Detail
Custom Cards transformieren dein Dashboard von funktional zu wunderschoen. 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.
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: horizontal1# Mushroom Chips Card — Kompakte Status-Leiste
2type: custom:mushroom-chips-card
3chips:
4 - type: weather
5entity: weather.home
6show_temperature: true
7 - type: entity
8entity: sensor.wohnzimmer_temperatur
9icon: mdi:thermometer
10 - type: entity
11entity: sensor.stromverbrauch
12icon: mdi:flash
13 - type: conditional
14conditions:
15 - entity: binary_sensor.haustuer
16 state: "on"
17chip:
18 type: entity
19 entity: binary_sensor.haustuer
20 icon: mdi:door-open
21 icon_color: red
22 - type: alarm-control-panel
23entity: alarm_control_panel.alarm1# 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/übersicht1# Mushroom Person Card — Anwesenheit
2type: custom:mushroom-person-card
3entity: person.max
4layout: horizontal
5primary_info: name
6secondary_info: state
7icon_type: entity-pictureMini Graph Card — Kompakte Verlaufsgrafiken
1# Mini Graph Card mit mehreren Linien
2type: custom:mini-graph-card
3entities:
4 - entity: sensor.aussentemperatur
5name: Aussen
6color: "#03A9F4"
7 - entity: sensor.wohnzimmer_temperatur
8name: Innen
9color: "#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
21color: "#1565C0"
22 - value: 15
23color: "#43A047"
24 - value: 25
25color: "#FF6F00"
26 - value: 35
27color: "#D32F2F"ApexCharts Card — Professionelle Diagramme
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
11type: column
12name: Verbrauch (kWh)
13color: "#E53935"
14group_by:
15 func: max
16 duration: 1d
17 - entity: sensor.solar_taeglich
18type: column
19name: Solar (kWh)
20color: "#FFC107"
21group_by:
22 func: max
23 duration: 1d
24apex_config:
25 chart:
26stacked: false
27 plotOptions:
28bar:
29 borderRadius: 4Floor Plan Card — Grundriss als Dashboard
1# Picture Elements: Grundriss mit interaktiven Elementen
2type: picture-elements
3image: /local/images/grundriss.png
4elements:
5 - type: state-icon
6entity: light.wohnzimmer
7style:
8 top: 45%
9 left: 30%
10tap_action:
11 action: toggle
12 - type: state-label
13entity: sensor.wohnzimmer_temperatur
14suffix: " Grad"
15style:
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
24entity: binary_sensor.haustuer
25style:
26 top: 85%
27 left: 50%
28 - type: icon
29icon: mdi:cctv
30entity: camera.flur
31style:
32 top: 10%
33 left: 80%
34tap_action:
35 action: more-infoWeitere empfehlenswerte Custom Cards
- Battery State Card — Übersicht aller Batteriestaende mit Warnfarben
- ApexCharts Card — Professionelle Diagramme (Linien, Balken, Donut)
- Atomic Calendar — Kalender-Karte mit Google/iCal Integration
- Waste Collection — Muellabfuhr-Kalender mit Countdown
- Mini Media Player — Kompakter, schoener Mediaplayer
- Vehicle Card — Auto-Status: Ladezustand, Reichweite, Position
- Flower Card — Pflanzenpflege: Feuchte, Licht, Temperatur
- Layout Card — Erweiterte Layout-Kontrolle für Grid & Masonry
Neu in 2026.4: Dashboard-Verbesserungen
Section Hintergrundfarben: Sections können jetzt eine Hintergrundfarbe bekommen. In den Section-Einstellungen aktivierst du "Hintergrund", wählst eine Farbe und stellst die Transparenz ein. Das gibt Dashboards mehr visuelle Struktur.
Auto Height für Karten: Karten passen ihre Höhe jetzt automatisch an den Inhalt an, statt feste Grid-Zeilen zu belegen. Das war vorher nur per YAML möglich und ist jetzt direkt im Karten-Editor unter "Auto Height" verfügbar. Entities Card und Vertical Stack nutzen das standardmäßig.
Markdown Card Actions: Die Markdown Card unterstützt jetzt Tap-, Hold- und Double-Tap-Actions. Damit werden Markdown Cards zu interaktiven Elementen, die navigieren, URLs öffnen oder Services aufrufen können.
Map Card Editor: Der visuelle Editor für die Map Card zeigt jetzt alle Optionen an, inklusive Label-Modus, Farbe und Attribut-Auswahl pro Entity. YAML ist dafür nicht mehr nötig.
Favoriten auf dem Dashboard: Bei Licht-Karten (Tile und Light Card) kannst du Farb-Favoriten als Buttons hinzufügen. Auch Cover und Ventile unterstützen Favoriten-Positionen (ganz offen, halb offen, geschlossen). Die Favoriten legst du im More-Info-Dialog fest.
Neu in 2026.5: Dashboard-Verbesserungen
Shortcut Card: Ein komplett neuer 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. Die Shortcut Card erkennt Icon und Farbe automatisch aus dem Ziel. Es gibt auch eine Badge-Variante für die Badge-Leiste.
Tile Card: Media Player Features: Die Tile Card kann jetzt Media Player richtig darstellen. Neue Features: Dropdown für Eingangs-/Source-Wechsel, Sound-Mode-Auswahl und frei sortierbare Playback-Buttons (Play, Pause, Stop, Vor, Zurück, Ein/Aus).
Tile Card: Wetter-Features: Für Wetter-Entities zeigt die Tile Card jetzt eine Stundenprognose (Temperaturlinie) und eine Tagesprognose (Min/Max-Balken) mit Niederschlagsanzeige.
Eingebaute Dashboards: Home Assistant bringt ab 2026.5 zwei neue automatische Dashboards mit. Das Maintenance Dashboard zeigt eine Batterie-Übersicht aller Geräte, gruppiert nach Bereich. Das Security Dashboard hat eine Activity-Sidebar mit 24-Stunden-Logbook für alle sicherheitsrelevanten Entities.
Visibility Conditions: Bei der Sichtbarkeitssteuerung von Karten gibt es jetzt die Option "Aktuelle Entität". Damit kannst du Conditions direkt auf die Entity der Karte beziehen, ohne die ID manuell einzutragen. Attribute lassen sich jetzt ebenfalls als Bedingung prüfen.
Themes — Das Aussehen verändern
Themes verändern das gesamte Erscheinungsbild: Farben, Schriften, Abstände, Rundungen.
Theme installieren
- HACS öffnen — HACS, Frontend, Themes durchsuchen
- Theme installieren — Theme auswählen und installieren
- HA neustarten — Einstellungen, System, Neustart
- 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 schoenen Schatten
Eigenes Theme erstellen
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
1# Komplettes Wohnzimmer-Dashboard
2# Vertical Stack mit allen Elementen
3type: vertical-stack
4cards:
5 # Status-Chips oben
6 - type: custom:mushroom-chips-card
7chips:
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
17title: Beleuchtung
18 - type: grid
19columns: 2
20square: false
21cards:
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
33title: Klima
34 - type: custom:mini-graph-card
35entities:
36 - sensor.wohnzimmer_temperatur
37hours_to_show: 24
38line_width: 2
39show:
40 labels: true
41 points: false
42
43 # Media
44 - type: custom:mushroom-title-card
45title: Medien
46 - type: custom:mini-media-player
47entity: media_player.sonos_wohnzimmer
48artwork: cover
49hide:
50 power: false
51 volume: falseStatus-Dashboard für den Eingangsbereich
1# Eingangsbereich Quick-Status
2type: vertical-stack
3cards:
4 - type: custom:mushroom-template-card
5primary: >
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 %}
15secondary: >
16 {{ states('sensor.haustuer_letzte_aktivitaet') }}
17icon: mdi:home-account
18
19 - type: conditional
20conditions:
21 - condition: state
22 entity: binary_sensor.haustuer
23 state: "on"
24card:
25 type: markdown
26 content: "## Haustuer ist OFFEN!"
27
28 - type: grid
29columns: 3
30cards:
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: GarageResponsive 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 Bildschirmgroesse ein-/ausblenden
- Tap Actions — Größere Touch-Ziele für einfache Bedienung
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: trueDashboard für Wandtablet
Viele Nutzer montieren ein günstiges Tablet an die Wand als permanentes Smart-Home-Display.
- Panel-Modus — Eine Karte fuellt 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
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: trueHinweis: 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.
Weiter: Lerne die YAML-Konfiguration kennen, um noch mehr aus deinem Dashboard herauszuholen: YAML-Konfiguration
Passende Videos
Jackery SolarVault 3 Pro in Home Assistant integrieren
Ich zeige dir Schritt für Schritt, wie du den Jackery SolarVault 3 Pro per MQTT in Home Assistant integrierst – mit 52 Entities, YAML-Snippets und Energy Dashboard.
Home Assistant 2026.5: RF-Support, Dashboards und mehr
Home Assistant 2026.5 bringt RF-Support für alte Funkgeräte, ein neues Wartungsdashboard, die Shortcut Card und erweiterte Automations-Trigger. Ich zeige dir die wichtigsten Neuerungen.
Jackery SolarVault 3 Pro: 3 Szenarien im Test
Ich zeige dir drei Einsatzszenarien für den Jackery SolarVault 3 Pro: mit Balkonkraftwerk, bestehender PV und komplett ohne Solar. Inklusive echter Zahlen und Home Assistant Integration.
Verwandte Inhalte
Jackery SolarVault 3 Pro in Home Assistant integrieren
TRMNL E-Ink Display mit Home Assistant einrichten
Home Assistant 2026.4: Infrarot, neue Trigger und mehr
Perfekte Dashboard Karten für Waschmaschine, Trockner & mehr (WashData + Mushroom + Timer Bar)
Home Assistant Automationen: Einstieg und Praxis für Smart Home
Garmin Fitness Dashboard in Home Assistant: Aktivitäten, Ziele und Statistiken