Iedereen die wel eens zijn Home Assistant dashboard heeft aangepast, weet: standaardkaarten kunnen soms wat… beperkt aanvoelen. Daar komt Bubble Cards om de hoek kijken.
Met Bubble Cards geef je je interface niet alleen een visuele upgrade, maar krijg je ook veel meer controle over interactie en navigatie. Minder klikken, sneller schakelen, en alles precies zoals jij het wilt.
De integratie is ontwikkeld door Clooos en wordt actief onderhouden via GitHub. Hij heeft hiermee een van de meest veelzijdige UI-tools binnen de Home Assistant-community neergezet, volledig open-source en continu in ontwikkeling.
In deze blog neem ik je kort mee in wat Bubble Cards zijn, waarom je ze zou willen gebruiken, en hoe je er direct vandaag nog mee aan de slag kunt. Tijd om je dashboard écht next-level te maken.
Wat zijn Bubble Cards?
Bubble Cards zijn een krachtige custom kaart voor Home Assistant die je volledige controle geeft over de weergave en interactie van je dashboard.
In plaats van vast te zitten aan standaard layouts en stijlen, kun je met Bubble Cards zelf bepalen waar je elementen plaatst, hoe ze eruitzien, en hoe ze reageren op input of statuswijzigingen.
Denk aan dynamische styling, conditionele zichtbaarheid, animaties, icon-swaps en volledig configureerbare tap-actions, allemaal binnen één flexibele kaart.
Het resultaat: een dashboard dat er niet alleen beter uitziet, maar ook sneller en slimmer werkt.
Waarom zou je Bubble Cards gebruiken?
Omdat standaardkaarten gewoon niet genoeg zijn als je nét wat meer controle, snelheid en stijl wilt. Met Bubble Cards kun je zelf bepalen hoe je dashboard eruitziet én hoe het zich gedraagt. Geen statische lijsten of eindeloze tabbladen meer, maar een interface die intuïtief en visueel krachtig is.
Je gebruikt Bubble Cards bijvoorbeeld als je:
- Sneller wilt schakelen tussen apparaten, zonder eerst door meerdere schermen te klikken.
- Een logische en overzichtelijke layout wilt, waarbij je elementen kunt groeperen zoals jij dat wilt.
- Pop-ups wilt gebruiken voor extra info of bediening, zonder het hoofdscherm te verlaten.
- Condities of statuswijzigingen visueel wilt weergeven met kleurwisselingen, icon-swaps of animaties.
- Een dashboard wilt maken dat je niet alleen functioneel gebruikt, maar ook graag laat zien.
Kortom: Bubble Cards geven je als power user de tools om je smart home interface écht op maat te maken, zonder limieten, zonder concessies.
Bubble Cards: niet alleen dashboards, maar ook ingebouwde pop-ups
Bubble Cards worden niet alleen gebruikt om je Home Assistant dashboard visueel op te poetsen; ze bieden ook native ondersteuning voor pop-up functionaliteit.
In plaats van een aparte integratie of extra addon te gebruiken, kun je rechtstreeks binnen de Bubble Card instellen dat een klik op een icoon of knop een volledig gestylede pop-up opent. Denk aan een snelle bediening voor een lamp (aan/uit, dimmen, kleur aanpassen) zonder je hele dashboard te verlaten.
Het mooie: je hebt volledige controle over de inhoud en layout van de pop-up, inclusief custom knoppen, sliders en statusweergaves. Alles wordt afgehandeld binnen de configuratie van de Bubble Card zelf, wat zorgt voor een cleanere setup en snellere reacties.
Bubble Card installeren via HACS: zo gepiept
Om Bubble Cards in je Home Assistant setup te krijgen, gebruik je het liefst HACS (Home Assistant Community Store), de makkelijke en nette manier om custom components te beheren.
Even in het kort:
Open je Home Assistant dashboard.
Ga naar HACS .
Klik in de zoekbalk en tik Bubble Card in.
Selecteer Bubble Card uit de lijst en klik rechts onderin je scherm op Download.
Klik vervolgens weer op Download in het pop up venster.
Een korte reload van je frontend later en je bent good to go. Klaar om je dashboard om te toveren met dynamische bubbels en stijlvolle pop-ups.
Dashboard bouwen met Bubble Cards: je eigen flow ontwerpen
Na installatie van de Bubble Card integratie kun je eindelijk écht losgaan: je eigen dashboard bouwen, precies zoals jij dat wilt. Binnen Bubble Card kun je verschillende kaarttypes toevoegen, zoals:
Button (de basis voor interacties)
Cover (voor bijvoorbeeld rolluiken)
Climate (temperatuur regelen)
Empty Column (voor flexibele layouts)
Horizontal Buttons Stack (meerdere buttons op een rij)
Mediaplayer (bediening van je Sonos, Chromecast etc.)
Pop-up (voor geavanceerde info of instellingen)
Select (dropdown menu’s)
Seperator (visuele scheiding tussen elementen)
Een pop-up maken? Zo doe je dat:
Voeg eerst in je selectie een Button toe, dit wordt je trigger voor de pop-up.
Maak in je Selection een nieuwe Vertical Stack aan.
Voeg als eerste kaart in die vertical stack een Bubble Card toe en selecteer de kaart type Pop-up.
Bij de Hash van die Bubble Card geef je een unieke naam op (bijvoorbeeld
#pop-up-woonkamer).Vervolgens kun je de Vertical Stack vullen met de kaarten die je in je pop-up wilt tonen: sliders, statusinformatie, bedieningen, alles wat je nodig hebt.
Om de pop-up werkend te maken:
Ga terug naar je oorspronkelijke Bubble Button Card (de knop die je eerder maakte).
Bij Tap Action → On Icon/Button kies je Navigate.
Als navigatie-doel vul je de naam in die je bij de Hash hebt opgegeven (bijvoorbeeld
#pop-up-woonkamer).
Klik op opslaan en je bent Klaar. Tik je op de button, dan opent soepel je custom pop-up met alle ingestelde kaarten.
Pro tip: Werk netjes met logische hash-namen en duidelijke indelingen, zeker als je straks tientallen pop-ups hebt draaien.
Sub Buttons: compacte info en acties, direct in je knop
Sub Buttons in Bubble Cards zijn geen dropdowns of pop-ups, maar extra elementen die direct in de knop zelf worden weergegeven. Denk aan kleine iconen, statusinfo of aanvullende actieknoppen die netjes binnen de hoofdknop gepositioneerd zijn.
Ze zijn ideaal voor situaties waar je meerdere stukjes informatie of acties wilt combineren binnen één compacte kaart. Bijvoorbeeld:
- Een lichtknop met direct zichtbaar of het dimniveau is ingesteld.
- Een verwarmingsknop met een mini-temp status en een “boost”-icoon erbij.
Iedere Sub Button kun je voorzien van een eigen icoon, kleur, positie en tap-action. Je hebt volledige controle over layout en gedrag, en dat allemaal zonder het dashboard rommelig of druk te maken.
Styling opties: maak je Bubble Cards helemaal eigen
Iedere kaart binnen Bubble Card heeft een eigen “Styling” tabblad, waarmee je volledige controle hebt over hoe je bubbels eruitzien. Geen standaard blauwe knopjes meer, vanaf hier kun je echt alles tweaken naar jouw smaak.
Bij “Card Layout” bepaal je onder andere de grootte van de bubble, zodat je kleinere statusbubbels of juist grote, prominente bedieningsknoppen kunt maken. Perfect om je dashboard overzichtelijk én functioneel te houden.
Wil je nog verder gaan?
Dan duik je in het tabblad “Custom Styles / Templates”. Hier kun je met eenvoudige CSS-achtige regels:
De achtergrondkleur van je bubble aanpassen.
De kleur en het uiterlijk van je icoon wijzigen.
Condities instellen, zoals: andere kleur bij bepaalde status (bijvoorbeeld rood als een raam openstaat).
Dynamisch iconen wisselen afhankelijk van apparaatstatus (bijvoorbeeld een lamp-icoon verandert naar een ‘power-off’ icoon als het licht uitgaat).
Zelfs animaties toevoegen, zoals een pulserend effect als een sensor in alarmstatus komt.
Kortom: alles is aan te passen, tot op het kleinste detail.
Of je nu een strak minimalistisch dashboard wilt bouwen of een kleurrijke interactieve interface, met de stylingopties van Bubble Card zit je goed.
Custom style / template voorbeelden
Op de tabbladen hieronder vind je stylingcodes die je kunt gebruiken met de bubbelcards.
Let op! In sommige codes moet je nog entiteiten aanpassen om ze goed te laten werken. Alle entiteiten moeten tussen enkele aanhalingstekens staan.
Voor de kleuren kan je de HTML kleuren gebruiken. Klik hier voor de kleuren
Voor iconen kan je de Material design icons gebruiken welke je hier kan vinden
Beveiliging Bubbles
Card type: Button Button type: State
Wat doet de code?: Deze code verandert de kleur van de bubbel aan de hand van de aanwezigheid van de persoon
/* MADE BY Homey Cornelisse */
.bubble-button-background {
opacity: 0.9 !important;
background-color: ${['not_home'].includes(state) ? 'tomato' : 'mediumseagreen'} !important;
}
Card type: Button Button type: State
Aanpassen naar eigen entiteit: binary_sensor.pir_gang_voor
Wat doet de code?: Deze code past de grootte van het icoon aan naar 25 pixels, dat het icoon verandert en rood wordt. Daarnaast gaat de knop rood pulseren zodra de sensor actief wordt.
/* MADE BY Homey Cornelisse */
.bubble-icon {
--mdc-icon-size: 25px !important;
}
.bubble-icon {
color: ${state === 'off' ? 'silver' : 'red'} !important;
}
.bubble-button-background {
/* ANIMATIE */
animation: ${hass.states['binary_sensor.pir_gang_voor'].state === 'on'
? 'fade 4s linear infinite'
: 'none'};
/* KLEUR */
background-color: ${hass.states['binary_sensor.pir_gang_voor'].state === 'on'
? 'red'
: 'silver'};
}
/* zachte fade‑in‑‑out animatie */
@keyframes fade {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
${icon.setAttribute("icon", hass.states['binary_sensor.pir_gang_voor'].state === 'off' ? 'mdi:motion-sensor-off' : 'mdi:motion-sensor')}
Card type: Button Button type: State
Aanpassen naar eigen entiteit: binary_sensor.water_drupje_vocht
Wat doet de code?: Deze code past de grootte van het icoon aan naar 25 pixels, verandert het icoon en de kleur van het icoon en de bubbel zodra er water wordt gedetecteerd, en laat de bubbel pulseren.
/* MADE BY Homey Cornelisse */
.bubble-icon {
--mdc-icon-size: 25px !important;
}
.bubble-icon {
color: ${state === 'off' ? 'deepskyblue' : 'skyblue'} !important;
}
.bubble-button-background {
/* ANIMATIE */
animation: ${hass.states['binary_sensor.water_drupje_vocht'].state === 'on'
? 'fade 4s linear infinite'
: 'none'};
/* KLEUR */
background-color: ${hass.states['binary_sensor.water_drupje_vocht'].state === 'on'
? 'orangered'
: 'silver'};
}
/* zachte fade‑in‑‑out animatie */
@keyframes fade {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
${icon.setAttribute("icon", hass.states['binary_sensor.pir_badkamer_voor'].state === 'off' ? 'mdi:water-off' : 'mdi:water')}
Klimaat Bubbles
Card type: Button Button type: State
Aanpassen naar eigen entiteit: sensor.netatmo_temperatuur
Wat doet de code?: Deze code past de kleur van zowel het icoon als de bubbel aan op basis van de sensorwaarde: Blauw betekent het is koud en rood betekent veel te warm
/* CODE MADE BY Homey Cornelisse */
.bubble-icon {
color: ${
hass.states['sensor.netatmo_temperatuur'].state < 16 ? 'deepskyblue'
: hass.states['sensor.netatmo_temperatuur'].state < 18 ? 'dodgerblue'
: hass.states['sensor.netatmo_temperatuur'].state < 22 ? 'springgreen'
: hass.states['sensor.netatmo_temperatuur'].state < 25 ? 'gold'
: 'red'
} !important;
}
.bubble-button-background {
background-color: ${
hass.states['sensor.netatmo_temperatuur'].state < 16 ? 'deepskyblue'
: hass.states['sensor.netatmo_temperatuur'].state < 18 ? 'dodgerblue'
: hass.states['sensor.netatmo_temperatuur'].state < 22 ? 'springgreen'
: hass.states['sensor.netatmo_temperatuur'].state < 25 ? 'gold'
: 'red'
} !important;
}
Card type: Button Button type: State
Aanpassen naar eigen entiteit: sensor.woonkamer_luchtvochtigheid
Wat doet de code?: Deze code past de kleur van zowel het icoon als de bubbel aan op basis van de sensorwaarde: groen betekent een goede luchtvochtigheid, oranje betekent dat de luchtvochtigheid aan de hoge kant is, en rood betekent een te hoge luchtvochtigheid.
/* MADE BY Homey Cornelisse */
.bubble-icon {
color: ${
hass.states['sensor.woonkamer_luchtvochtigheid'].state > 70 ? 'red'
: hass.states['sensor.woonkamer_luchtvochtigheid'].state < 30 ? 'red'
: hass.states['sensor.woonkamer_luchtvochtigheid'].state < 40 ? 'orange'
: hass.states['sensor.woonkamer_luchtvochtigheid'].state > 60 ? 'orange'
: 'mediumseagreen'
} !important;
}
.bubble-button-background {
background-color: ${
hass.states['sensor.woonkamer_luchtvochtigheid'].state > 70 ? 'red'
: hass.states['sensor.woonkamer_luchtvochtigheid'].state < 30 ? 'red'
: hass.states['sensor.woonkamer_luchtvochtigheid'].state < 40 ? 'orange'
: hass.states['sensor.woonkamer_luchtvochtigheid'].state > 60 ? 'orange'
: 'mediumseagreen'
} !important;
}
Card type: Button Button type: State
Aanpassen naar eigen entiteit: sensor.woonkamer_kooldioxide
Wat doet de code?: Deze code past de kleur van zowel het icoon als de bubbel aan op basis van de sensorwaarde: Groen betekent het Co2 niveau is goed Oranje betekent Co2 niveau is aan de hoge kan, raam openen is aanbevolen en Rood betekent het Co2 niveau is veel te hoog meteen een deur openen
/* MADE BY Homey Cornelisse */
.bubble-icon {
color: ${
hass.states['sensor.woonkamer_kooldioxide'].state > 1100 ? 'red'
: hass.states['sensor.woonkamer_kooldioxide'].state > 600 ? 'orange'
: 'springgreen'
} !important;
}
.bubble-button-background {
background-color: ${
hass.states['sensor.woonkamer_kooldioxide'].state > 1100 ? 'red'
: hass.states['sensor.woonkamer_kooldioxide'].state > 600 ? 'orange'
: 'springgreen'
} !important;
}
Card type: Button Button type: State
Aanpassen naar eigen entiteit: sensor.windkracht
Wat doet de code?: Deze code past de kleur van zowel het icoon als de bubbel aan op basis van de sensorwaarde: groen betekent weinig wind en rood betekent veel wind
/* MADE BY Homey Cornelisse */
.bubble-icon {
color: ${
hass.states['sensor.windkracht'].state > 8 ? 'crimson'
: hass.states['sensor.windkracht'].state > 6 ? 'orangered'
: hass.states['sensor.windkracht'].state > 4 ? 'darkorange'
: hass.states['sensor.windkracht'].state > 2 ? 'gold'
: 'springgreen'
} !important;
}
.bubble-button-background {
background-color: ${
hass.states['sensor.windkracht'].state > 8 ? 'crimson'
: hass.states['sensor.windkracht'].state > 6 ? 'orangered'
: hass.states['sensor.windkracht'].state > 4 ? 'darkorange'
: hass.states['sensor.windkracht'].state > 2 ? 'gold'
: 'springgreen'
} !important;
}
Card type: Button Button type: State
Aanpassen naar eigen entiteit: sensor.netatmo_lawaai
Wat doet de code?: Deze code past de kleur van zowel het icoon als de bubbel aan op basis van de sensorwaarde: groen betekent het geluids niveau is goed en rood betekent het geluids niveau is veel te hoog
/* MADE BY Homey Cornelisse */
.bubble-icon {
color: ${
hass.states['sensor.netatmo_lawaai'].state > 70 ? 'red'
: hass.states['sensor.netatmo_lawaai'].state > 45 ? 'orange'
: 'springgreen'
} !important;
}
.bubble-button-background {
background-color: ${
hass.states['sensor.netatmo_lawaai'].state > 70 ? 'red'
: hass.states['sensor.netatmo_lawaai'].state > 45 ? 'orange'
: 'springgreen'
} !important;
}
Card type: Button Button type: Slider
Aanpassen naar eigen entiteit: input_boolean.stand_auto, input_boolean.stand_1, input_boolean.stand_2, input_boolean.stand_3
Wat doet de code?: Deze code past de kleur van zowel het icoon als de bubbel aan op basis van de ventilatiestand. Daarnaast zorgt deze code ook voor een geanimeerd icoon: zodra de ventilatie aanstaat, gaat het ventilator-icoon draaien, en zodra de ventilatie uitstaat, stopt het met draaien.
Elke ventilatiestand heeft zijn eigen kleur, zodat je makkelijk kunt zien op welke stand hij staat: stand 1 is groen, stand 2 is goud, stand 3 is rood, uit is zilver en automatisch is blauw.
Naast de kleur wordt ook de tekst in de bubbel aangepast naar de ventilatiestand.
/* MADE BY Homey Cornelisse */
.bubble-button-card-container {
--bubble-main-background-color: ${
hass.states['input_boolean.stand_auto'].state === 'on' ? 'skyblue'
: hass.states['input_boolean.stand_1'].state === 'on' ? 'springgreen'
: hass.states['input_boolean.stand_2'].state === 'on' ? 'gold'
: hass.states['input_boolean.stand_3'].state === 'on' ? 'tomato'
: 'silver'
} !important;
opacity: ${
hass.states['input_boolean.stand_1'].state === 'on' ? '0.8'
: hass.states['input_boolean.stand_2'].state === 'on' ? '0.8'
: hass.states['input_boolean.stand_3'].state === 'on' ? '0.8'
: hass.states['input_boolean.stand_auto'].state === 'on' ? '0.8'
: '0.5'
} !important;
}
/* ─── ICON ROTATIE ─── */
.bubble-icon {
animation: ${
['input_boolean.stand_auto','input_boolean.stand_1','input_boolean.stand_2','input_boolean.stand_3']
.some(id => hass.states[id].state === 'on')
? 'slow-rotate 1s linear infinite'
: 'none'
} !important;
}
@keyframes slow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ─── DYNAMISCHE TEKST & ICOON (laatste regels!) ─── */
${(() => {
const s = id => hass.states[id].state === 'on';
/* Eenmalig icoon instellen */
icon.setAttribute('icon', 'mdi:fan');
/* Label per actieve stand */
card.querySelector('.bubble-name').innerText =
s('input_boolean.stand_auto') ? 'Auto'
: s('input_boolean.stand_1') ? 'Ventilate Stand 1'
: s('input_boolean.stand_2') ? 'Ventilate Stand 2'
: s('input_boolean.stand_3') ? 'Ventilate Stand 3'
: 'Uit';
return '';
})()}
}
Verlichting Bubbles
Card type: Button Button type: Switch
Wat doet de code?: Deze code past de grootte van het icoon aan naar 25 pixels en verandert de kleur van het icoon en de bubbel zodra de lamp aangaat.
/* MADE BY Homey Cornelisse */
.bubble-icon {
--mdc-icon-size: 25px !important;
}
.bubble-icon {
color: ${state === 'off' ? 'silver' : 'gold'} !important;
}
.bubble-button-background {
opacity: 0.5 !important;
background-color: ${state === 'off' ? 'silver' : 'gold'} !important;
Card type: Button Button type: Slider
Aanpassen naar eigen entiteit: light.spot_l_licht
Wat doet de code?: Deze code zorgt ervoor dat het icoon verandert zodra de lamp aangaat: van een uit-lampje naar een aan-lampje, en andersom.
/* MADE BY Homey Cornelisse */
${icon.setAttribute("icon", hass.states['light.spot_l_licht'].state === 'on' ? 'mdi:lightbulb-on-outline' : 'mdi:lightbulb-outline')}
Aan de slag met Bubble Cards
Of je nu een minimalistisch dashboard bouwt of juist een rijk gevulde interface wilt met slimme interacties en dynamische styling, met Bubble Cards heb je de tools in handen om je Home Assistant naar een hoger niveau te tillen.
Experimenteer, speel met de stylingopties en ontdek wat er allemaal mogelijk is. Eén ding is zeker: zodra je eenmaal met Bubble Cards werkt, wil je niet meer terug naar standaard Lovelace-kaarten.
