Cos’è la Bubble Card e perché installarla
La Bubble Card è una scheda personalizzata (custom card) di Home Assistant progettata per dashboard Lovelace minimaliste e funzionali. Come descritto dal creatore del progetto su GitHub (Clooos/Bubble-Card), si tratta di “una raccolta di schede minimalista e personalizzabile… con un elegante tocco pop-up”.
Grazie alla sua funzionalità di apertura di finestre pop-up al tap, la Bubble Card permette di mantenere l’interfaccia principale pulita, mostrando controlli e informazioni secondarie solo quando serve. In pratica, ogni “bolla” può rappresentare una stanza o un dispositivo, e cliccandola si apre un pannello con i dettagli (sensori, luci, climatizzazione, ecc.), riducendo così l’affollamento grafico.
Un vantaggio segnalato dalla community è la possibilità di unificare ventilazione e riscaldamento in un’unica scheda interattiva, cosa non realizzabile con altri set di schede (ad es. Mushroom). In sintesi, la Bubble Card è pensata per modernizzare la tua interfaccia smart home, offrendo un look elegante alla dashboard Lovelace e centralizzando il controllo di molteplici entità in un’unica vista cliccabile.
Aggiornamento marzo 2026: La versione attuale è la v3.1.4, rilasciata per risolvere i problemi di compatibilità con Home Assistant 2026.3. Se hai aggiornato HA di recente, assicurati di essere almeno alla v3.1.3 o superiore.
Novità: Bubble Card 3.1.0 è disponibile
La nuova versione introduce slider nei sub-button, layout personalizzabili e un editor 100x più veloce. Scopri tutte le funzionalità della release 2026.
Leggi la guida completa alla Bubble Card 3.1.0
Come funziona e vantaggi rispetto ad altre card
La Bubble Card si integra come qualsiasi custom card nella dashboard Lovelace, ma si distingue per due elementi chiave: i pop-up e la barra di navigazione orizzontale. Questo tutorial spiega entrambi i meccanismi nel dettaglio, così da capire cosa aspettarti prima di procedere con l’installazione.
Come funzionano i pop-up
Con le pop-up card, ogni bolla (bubble) crea un’ancora (hash) sulla pagina; cliccandola si apre un pannello sovrapposto con comandi aggiuntivi (es. slider, selettori, bottoni) relativi a quella stanza o entità. Questo permette di accedere a funzioni avanzate senza ingombrare la vista principale del dashboard.
Il meccanismo è basato sull’URL hash: ogni pop-up ha un identificatore univoco (es. #kitchen) che viene aggiunto all’URL quando il pannello è aperto. Questo rende i pop-up navigabili con il tasto indietro del browser, un dettaglio che migliora sensibilmente l’usabilità su mobile.
La horizontal-buttons-stack
La card horizontal-buttons-stack è una barra fissa di pulsanti posta in fondo alla pagina che funge da menu di navigazione. Questa barra scrollabile rimane sempre visibile e permette di aprire i pop-up corrispondenti o navigare a viste diverse del dashboard.
Con l’opzione auto_order: true, i pulsanti si riordinano automaticamente in base all’ultima attività rilevata dai sensori di presenza associati — una funzione molto utile nelle case con più stanze attive.
Differenze rispetto a Mushroom Cards
Rispetto a Mushroom, Bubble Card offre un’interazione più dinamica: i pop-up permettono di centralizzare più controlli in un solo elemento (luci, ventilazione, media player, scene) senza sacrificare chiarezza o spazio sullo schermo. Mushroom è più adatta a dashboard statiche con card sempre visibili, mentre Bubble Card eccelle nelle interfacce compatte con navigazione a livelli. Per un confronto dettagliato leggi Bubble Card vs Mushroom vs Button Card.
Prerequisito: Per installare Bubble Card ti serve HACS. Segui la
guida all’installazione di HACS
se non lo hai ancora configurato.
L’uso di queste funzionalità consente di centralizzare più controlli in un solo elemento (ad es. luci, ventilazione, media player, scene) senza sacrificare chiarezza o spazio sullo schermo. Per approfondire come gestire le luci con Home Assistant leggi la guida
Automatizzare luci con Home Assistant
.
Come installare la Bubble Card
La Bubble Card è disponibile su HACS (Home Assistant Community Store) oppure tramite installazione manuale dai sorgenti GitHub. Si consiglia vivamente di utilizzare HACS per facilitare gli aggiornamenti automatici. Ad oggi, la Bubble Card supporta Home Assistant dalla versione minima 2023.9.0.
Via HACS
ConsigliatoAssicurati di avere HACS già installato e configurato
Apri HACS → Frontend e clicca il pulsante ”+” in basso a destra
Cerca “Bubble Card” nell’elenco e procedi con l’installazione
Riavvia Home Assistant o svuota la cache del browser
Verifica in Edit → Manage Resources che bubble-card.js sia registrato come JavaScript Module
Installazione manuale
AlternativaScarica i file bubble-card.js e bubble-pop-up-fix.js dal repository GitHub Clooos/Bubble-Card
Copia i file nella cartella <config>/www/ della tua istanza Home Assistant
In Lovelace vai su Edit Dashboard → Manage Resources → Add Resource
Inserisci il percorso /local/bubble-card.js?v=1 come risorsa di tipo JavaScript Module
Salva e ricarica la pagina
Risultato finale
Una volta completata l’installazione con uno dei due metodi, la “Bubble Card” apparirà nella lista delle schede disponibili quando creerai nuove card nel tuo dashboard Lovelace di Home Assistant.
Esempi di configurazione YAML aggiornati 2026
Ecco alcuni esempi pratici aggiornati alla v3.1.x. Ricorda di usare il tipo custom:bubble-card e i rispettivi card_type.
Pop-up base per una luce
Definisce una bolla “Cucina” che apre i controlli della luce light.kitchen. Il parametro hash (es. #kitchen) è l’ancora usata per associare il pulsante al pop-up.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Cucina
icon: mdi:fridge
entity: light.kitchenNota v3.1.2+: I valori hash esistenti sono ora visibili nel dropdown “Navigation path” dell’editor, rendendo molto più semplice collegarli senza errori.
Pulsante slider per intensità luminosa
Una button card con slider per controllare la luminosità di una luce.
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.kitchen_led
name: LED Cucina
icon: mdi:led-strip-variantNota v3.1.3+: Gli slider ora usano color_temp_kelvin per la temperatura colore, in linea con le modifiche introdotte da Home Assistant 2026.3.
Barra orizzontale di navigazione (horizontal-buttons-stack)
Una horizontal-buttons-stack con due pulsanti che si riordinano in base ai sensori di movimento. Questa card è fondamentale per la navigazione del dashboard su mobile.
type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Soggiorno
1_icon: mdi:sofa
1_link: '#living-room'
1_entity: light.living_room
1_pir_sensor: binary_sensor.soggiorno_movimento
2_name: Cucina
2_icon: mdi:fridge
2_link: '#kitchen'
2_entity: light.kitchen
2_pir_sensor: binary_sensor.cucina_movimentoL’opzione auto_order: true utilizza i sensori di presenza per riordinare i pulsanti in base all’ultima attività rilevata — una funzione molto utile nelle case con più stanze attive.
Oltre a questi esempi base,
la documentazione ufficiale della Bubble Card su GitHub
offre molti altri utilizzi (clima con fan, media player, calendari, sub-button, ecc.). Per ispirazione leggi
5 esempi di dashboard con Bubble Card
e la guida ai
pop-up personalizzati
.
Personalizzazione visiva
La Bubble Card supporta la personalizzazione avanzata tramite variabili CSS. Ad esempio, è possibile cambiare colori di sfondo, accento e bordi attraverso variabili globali come:
--bubble-main-background-color--bubble-accent-color--bubble-border-radius
Integrando la Bubble Card con i temi di Lovelace è facile ottenere un’interfaccia coerente con il resto del dashboard. Per esempio con il tema Liquid Glass il risultato visivo è particolarmente curato. Se cerchi card aggiuntive con design minimal, dai un’occhiata anche alle WeSmart Custom Cards per Home Assistant.
Moduli Patreon (novità 2026)
Il creatore ha rilasciato tre nuovi moduli premium per i supporter su Patreon:
- Bubble Badges v2 — badge illimitati su qualsiasi sub-button o sull’icona principale
- Bubble Weather — sfondi animati con meteo e previsioni orarie/giornaliere
- Bubble Neon — tema dinamico che assegna automaticamente colori vibranti univoci a ogni card
Questi moduli sono opzionali ma mostrano bene il potenziale di personalizzazione raggiungibile con Bubble Card.
Compatibilità e limitazioni (aggiornato marzo 2026)
La Bubble Card richiede Home Assistant Core 2023.9.0 o superiore. Per la v3.1.x si consiglia tuttavia di essere aggiornati almeno alla versione 2025.x per evitare incompatibilità.
Bubble Card - Informazioni tecniche
Punti chiave
- Versione minima: HA 2023.9.0+ richiesto
- Versione attuale: v3.1.4, compatibile HA 2026.3
- HA 2026.3: Richiede Bubble Card v3.1.3+
- Posizione: Ultima card della vista Lovelace
- Performance: Ottimizzare con molti pop-up
- HACS: Aggiornamenti automatici
Cosa è cambiato con HA 2026.3
La versione 2026.3 di Home Assistant ha introdotto un nuovo sistema di dropdown che ha temporaneamente rotto diversi componenti di Bubble Card. Con la v3.1.4 tutti i problemi noti sono stati risolti, inclusi:
- Dropdown non funzionanti nell’editor
- Scrolling indesiderato nelle card con menu a discesa
- Bottoni “Copia YAML” non funzionanti
- Personalizzazione del backdrop dei pop-up non applicata
Se stai usando una versione di Bubble Card precedente alla 3.1.3 con HA 2026.3, aggiorna immediatamente tramite HACS.
Domande frequenti su Bubble Card
Bubble Card è gratuita?
Sì, Bubble Card è un progetto open source distribuito gratuitamente su GitHub. I moduli Patreon (Bubble Badges v2, Bubble Weather, Bubble Neon) sono opzionali e disponibili per chi supporta il creatore, ma non sono necessari per usare le funzionalità principali della card.
Bubble Card funziona senza HACS?
Sì, è possibile installarla manualmente copiando i file bubble-card.js nella cartella www/ di Home Assistant e registrandola come risorsa Lovelace. Tuttavia HACS è fortemente consigliato perché gestisce gli aggiornamenti automaticamente — fondamentale data la frequenza delle release di compatibilità con nuove versioni di HA.
Quante card posso inserire in un pop-up?
Non c’è un limite tecnico fisso, ma le performance degradano con molte entità monitorate simultaneamente. Per pop-up complessi (10+ card), si consiglia di disabilitare le animazioni e ridurre il numero di entità aggiornate in tempo reale. Il tutorial sui pop-up personalizzati mostra le configurazioni ottimali per dashboard ad alte prestazioni.
Bubble Card è compatibile con i temi di Home Assistant?
Sì. La card espone variabili CSS personalizzabili (--bubble-main-background-color, --bubble-accent-color, ecc.) che si integrano nativamente con i temi Lovelace. Con temi come Liquid Glass il risultato visivo è particolarmente curato.
Conclusione
La Bubble Card rimane la soluzione più versatile per rendere il dashboard Lovelace di Home Assistant interattivo ed elegante. Con la v3.1.4 è ora pienamente compatibile con Home Assistant 2026.3, e il progetto continua a evolversi con nuove funzionalità in arrivo con la v3.2.0.
Per approfondire, consulta il repository GitHub ufficiale di Bubble Card con tutti gli esempi disponibili. Sul nostro sito trovi anche la guida ai pop-up personalizzati e 5 esempi di dashboard pronti all’uso. La community su Reddit e nel forum GitHub è molto attiva e piena di spunti.
Sperimenta con colori, icone e variabili CSS per adattare la Bubble Card alla tua interfaccia smart home ideale — le potenzialità sono ampie e continuano a crescere a ogni release.
