{"id":326,"date":"2026-05-17T20:06:36","date_gmt":"2026-05-17T18:06:36","guid":{"rendered":"https:\/\/www.coremind.ch\/wordpress\/?p=326"},"modified":"2026-05-17T20:24:54","modified_gmt":"2026-05-17T18:24:54","slug":"mushroom-bubble-cards-dashboards-die-wirklich-begeistern","status":"publish","type":"post","link":"https:\/\/www.coremind.ch\/wordpress\/mushroom-bubble-cards-dashboards-die-wirklich-begeistern\/","title":{"rendered":"Mushroom & Bubble Cards: Dashboards, die wirklich begeistern"},"content":{"rendered":"

Wer Home Assistant lange betreibt, kennt das Ph\u00e4nomen: Die Automationen laufen perfekt, hundert Entit\u00e4ten erledigen ihre Aufgabe im Hintergrund \u2013 aber das Dashboard sieht aus wie eine Excel-Tabelle aus dem Jahr 2008. Lange Listen mit Schaltern, viel Weiss, kaum Hierarchie. Das funktioniert f\u00fcr den Admin, aber jedes andere Familienmitglied weicht aufs Sprachkommando aus. Wer 2026 ein Dashboard bauen will, das auch die Mitbewohner gerne benutzen, kommt an zwei Custom-Card-Sammlungen nicht vorbei: Mushroom Cards<\/strong> und Bubble Cards<\/strong>. Beide sind \u00fcber HACS installierbar, beide stabil und gepflegt, beide erg\u00e4nzen sich in der Praxis hervorragend.<\/p>\n

Warum die Standard-Cards an Grenzen stossen<\/h2>\n

Das Lovelace-Frontend liefert von Haus aus solide Bausteine: entities<\/code>, entity<\/code>, tile<\/code>, light<\/code>, thermostat<\/code>. Sie funktionieren, sind aber visuell zur\u00fcckhaltend. Wer ein Smartphone-natives, fingerfreundliches Dashboard bauen will \u2013 mit klaren Touch-Zielen, Animationen, sinnvoll gruppierten R\u00e4umen \u2013 ger\u00e4t schnell an die Limits. Genau in diese L\u00fccke stossen Mushroom und Bubble: Sie liefern dichtere Information pro Fl\u00e4che, sch\u00f6neres Styling und Interaktionsmuster, die man von kommerziellen Smarthome-Apps kennt.<\/p>\n

Schritt 1: HACS und Installation<\/h2>\n

Voraussetzung ist eine funktionierende HACS-Installation. In HACS unter \u00abFrontend\u00bb nach Mushroom<\/code> und Bubble Card<\/code> suchen, beide installieren, Home Assistant neustarten. Anschliessend m\u00fcssen die Ressourcen geladen werden \u2013 bei HACS-Installation passiert das in modernen HA-Versionen automatisch, ansonsten unter Einstellungen \u2192 Dashboards \u2192 Ressourcen<\/em> manuell pr\u00fcfen.<\/p>\n

Eine erste Probe macht man am besten in einem neuen, leeren Dashboard. So lassen sich die Karten experimentieren, ohne das produktive Hauptdashboard zu gef\u00e4hrden.<\/p>\n

Schritt 2: R\u00e4ume mit Mushroom Templates<\/h2>\n

Mushroom Cards leben von Templates. Der Klassiker ist eine Raum-\u00dcbersicht, die Licht, Temperatur und Anwesenheit in einer einzigen Karte zeigt:<\/p>\n

\ntype: custom:mushroom-template-card\nprimary: Wohnzimmer\nsecondary: >-\n  {{ states('sensor.wohnzimmer_temperatur') }}\u00b0C \u00b7\n  {{ states('sensor.wohnzimmer_luftfeuchtigkeit') }}%\nicon: mdi:sofa\nicon_color: >-\n  {% if is_state('light.wohnzimmer', 'on') %} amber\n  {% else %} grey {% endif %}\ntap_action:\n  action: navigate\n  navigation_path: \/lovelace\/wohnzimmer\nhold_action:\n  action: toggle\n  entity: light.wohnzimmer\n<\/code><\/pre>\n
Die Karte zeigt auf einen Blick den Zustand des Raums, ein Tap \u00f6ffnet die Detail-Ansicht des Raums, langes Dr\u00fccken schaltet das Licht direkt. Das ist das Muster, das Mushroom so wertvoll macht: jede Karte ist gleichzeitig Informationsanzeige und Steuerung.<\/p>\n
F\u00fcr Lichter, Klima und Medienspieler gibt es spezialisierte Mushroom-Varianten (mushroom-light-card<\/code>, mushroom-climate-card<\/code>, mushroom-media-player-card<\/code>), die schon out-of-the-box vern\u00fcnftig aussehen.<\/p>\n
Schritt 3: Pop-ups und Modals mit Bubble Cards<\/h2>\n
Was Mushroom nicht macht, sind echte Pop-ups. Hier kommen Bubble Cards ins Spiel. Eine bubble-card<\/code> vom Typ pop-up<\/code> blendet ein Modal direkt im aktuellen Dashboard ein \u2013 ideal f\u00fcr Raum-Detail-Seiten, ohne dass man eine eigene View bauen muss.<\/p>\n
\ntype: custom:bubble-card\ncard_type: pop-up\nhash: \"#wohnzimmer\"\nname: Wohnzimmer\nicon: mdi:sofa\nbutton_type: name\nmodules:\n  - default\n<\/code><\/pre>\n
Aufgerufen wird das Pop-up von einer Mushroom-Karte \u00fcber tap_action: action: navigate, navigation_path: \/lovelace\/main#wohnzimmer<\/code>. Im Pop-up landen dann alle Detail-Steuerungen: einzelne Lichter, Szenen-Buttons, Heizungs-Setpoint, Medienspieler. Da das Pop-up Teil derselben View ist, gibt es keinen sichtbaren Navigationswechsel \u2013 das f\u00fchlt sich an wie eine App, nicht wie eine Webseite.<\/p>\n
Bubble Card bringt ausserdem h\u00fcbsche Spezialkarten mit, etwa horizontal-buttons-stack<\/code> f\u00fcr die untere Navigation, slider<\/code> f\u00fcr sanfte Dim-Steuerungen oder die cover-card<\/code> f\u00fcr Rolll\u00e4den mit Vorschau.<\/p>\n
Schritt 4: Konsistenz mit Theme und Tap-Pattern<\/h2>\n
Damit das Resultat nicht zum Custom-Card-Karneval wird, lohnen sich zwei Vorgaben f\u00fcr sich selbst. Erstens: ein durchgehendes Theme. Graphite<\/em> oder Mushroom Themes<\/em> aus HACS sind eine sichere Wahl und bringen die n\u00f6tigen CSS-Variablen f\u00fcr beide Card-Familien mit. Zweitens: ein einheitliches Tap-Pattern. Bei mir gilt \u00fcberall \u2013 Tap = prim\u00e4re Aktion (Hauptlicht oder Hauptszene), Hold = Detail-Pop-up. Wer das durchzieht, muss seinen Mitbewohnern nichts erkl\u00e4ren.<\/p>\n
Schritt 5: Mobile zuerst, Desktop sp\u00e4ter<\/h2>\n
Die meisten Familienmitglieder bedienen Home Assistant auf dem Smartphone. Deshalb sollte das Dashboard mobile-first entworfen werden. In Mushroom und Bubble sind die Defaultgr\u00f6ssen schon auf Touch optimiert. Die einzige Disziplin: maximal sechs Kacheln pro Reihe auf dem Handy, Layout mit grid-layout<\/code> oder vertical-stack<\/code> aufbauen, nichts mit fixer Pixelbreite. Die Desktop-Ansicht kommt dann fast geschenkt, weil Browser und Tablet einfach mehr Spalten anzeigen.<\/p>\n
Wer ein zweites Tablet im Flur betreibt, profitiert von der kiosk-mode<\/code>-Integration zus\u00e4tzlich \u2013 sie versteckt Header und Sidebar dauerhaft.<\/p>\n
H\u00e4ufige Stolperfallen<\/h2>\n
Drei Punkte, an denen viele scheitern. Erstens: Templates greifen auf Entit\u00e4ten zu, die im Editor zur Designzeit nicht existieren. Wenn eine Karte \u00ableer\u00bb bleibt, fehlt meist ein Komma im Jinja-Template \u2013 die Karte rendert dann gar nichts. Zweitens: Pop-ups mit hash:<\/code> brauchen einen eindeutigen Hash pro Dashboard. Doppelte Hashes f\u00fchren zu seltsamen Sprung-Verhalten. Drittens: Performance. Bei mehr als 30 Mushroom-Karten in einer View lohnt sich layout-card<\/code> mit gestaffeltem Laden \u2013 sonst flackert das Dashboard beim \u00d6ffnen.<\/p>\n
Fazit<\/h2>\n
Mushroom und Bubble Cards verwandeln Home Assistant von einem Power-User-Werkzeug in eine UI, die der Rest der Familie freiwillig benutzt. Die Investition ist \u00fcberschaubar \u2013 ein Wochenende f\u00fcr die erste Version, eine weitere Iteration nach zwei Wochen praktischer Nutzung. Wer schon ein produktives HA-Setup hat, sollte als Erstes die Wohnzimmer-Karte umbauen und das neue Muster zwei Wochen testen, bevor das ganze Haus migriert wird. Mehr zur tieferen Anpassung gibt der Artikel zu AI Task in Home Assistant<\/a>, in dem strukturierte LLM-Antworten in die Dashboards integriert werden.<\/p>\n","protected":false},"excerpt":{"rendered":"
Wer Home Assistant lange betreibt, kennt das Ph\u00e4nomen: Die Automationen laufen perfekt, hundert Entit\u00e4ten erledigen ihre Aufgabe im Hintergrund \u2013 aber das Dashboard sieht aus wie eine Excel-Tabelle aus dem Jahr 2008. Lange Listen mit Schaltern, viel Weiss, kaum Hierarchie. Das funktioniert f\u00fcr den Admin, aber jedes andere Familienmitglied weicht aufs Sprachkommando aus. Wer 2026 … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-326","post","type-post","status-publish","format-standard","hentry","category-ha"],"_links":{"self":[{"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/posts\/326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":1,"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/posts\/326\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.coremind.ch\/wordpress\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}