HomeHome AssistantTutorialRecensioniTutti gli articoli
Home assistantFrontend

Bubble Card Home Assistant: guida completa 2026

Foto di Massimo Di Vona

Massimo Di Vona

11 marzo 2026 • Aggiornato il 26 agosto 2026

Dashboard Home Assistant con Bubble Card installata — confronto prima e dopo

Cos’è la Bubble Card e perché installarla

La Bubble Card è una custom card per Home Assistant pensata per creare dashboard minimaliste, compatte e funzionali. Il progetto è ben curato e aggiornato con regolarità, open source e disponibile su GitHub (Clooos/Bubble-Card).

La caratteristica distintiva resta l’interazione basata su finestre pop-up al tap, anche se nel tempo il concetto si è allargato: oggi non ci sono solo i pop-up, ma anche pulsanti e card di vario genere. Ogni elemento (“bolla”) è personalizzabile e può contenere i pulsanti e le card che vuoi — spesso rappresenta una stanza o un dispositivo. Toccandolo si apre un pannello dedicato con i controlli avanzati (luci, sensori, clima), evitando di sovraccaricare la schermata principale. È inoltre possibile unificare funzioni diverse — come ventilazione e riscaldamento — in un’unica interfaccia.

Editor di configurazione Bubble Card in Home Assistant con anteprima live

Come funziona e differenze con Mushroom

La Bubble Card si basa su due elementi architetturali chiave:

  • Pop-up basati su URL hash: cliccando su una card viene richiamata un’ancora univoca nell’URL (es. #kitchen) che apre il pannello sovrapposto. Questo permette la navigazione fluida anche tramite il pulsante “Indietro” del browser o dello smartphone.
  • Barra di navigazione (horizontal-buttons-stack): un menu fisso e scrollabile posto a fondo pagina per passare da una vista all’altra o richiamare i pop-up.

A differenza di Mushroom Cards, ideale per visualizzazioni statiche a tutto schermo, Bubble Card è ottimizzata per interfacce a livelli, permettendo di raggruppare decine di comandi in pochissimo spazio visivo. L’utilità della Bubble Card sta proprio qui: semplifica la dashboard ed elimina il rumore visivo di troppi pulsanti sempre in vista, nascondendoli dietro un click in più — veloce ed elegante. Per un confronto più approfondito con Mushroom e Button Card leggi Bubble Card vs Mushroom vs Button Card.

Come installare la Bubble Card

Ti serve HACS installato — se non l’hai ancora configurato, parti da lì prima di procedere.

Metodo 1: Tramite HACS (consigliato)

  1. Apri HACS
  2. Cerca Bubble Card e selezionala
  3. In basso a destra clicca su Download
  4. Torna nella dashboard e apri l’editor (icona matita)
  5. Cerca in Aggiungi alla Dashboard, sezione By Card: Bubble Card
Pagina Bubble Card in HACS con versione installata v3.2.5
Aggiunta della card Bubble Card alla dashboard tramite ricerca in HACS

Metodo 2: Installazione manuale

  1. Scarica i file bubble-card.js e bubble-pop-up-fix.js dalla repository GitHub
  2. Copia i file all’interno della cartella /www/ di Home Assistant
  3. Vai su Modifica Dashboard → Gestisci Risorse → Aggiungi Risorsa
  4. Inserisci il percorso /local/bubble-card.js?v=1 e seleziona Modulo JavaScript
  5. Salva e ricarica la pagina

Come per il metodo 1, vai su modifica dashboard e cerca la card Bubble Card.

Esempi di configurazione YAML

1. Pop-up base per una stanza

Creazione di un pop-up da zero nell'editor visuale (~2 min). Nel video creiamo un semplice esempio — non fare caso a forma e stile, serve solo a mostrare il procedimento passo passo.

Rispetto alle versioni precedenti alla 3.2.0, non serve più avvolgere tutto in un vertical-stack: la sintassi è più semplice e diretta. Ecco il codice YAML completo usato nel video:

YAMLEsempio configurazione
type: grid
cards:
  - type: heading
    heading: New section
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#cucina'
    cards:
      - type: tile
        entity: light.yeelight_color_0x36ed322  # sostituisci con la tua entità
      - type: tile
        entity: light.0xa4c1380a031cae28  # sostituisci con la tua entità
        features:
          - type: toggle
    button_type: name
    sub_button:
      main: []
      bottom: []
  - show_name: true
    show_icon: true
    type: button
    name: PopUp
    icon: mdi:party-popper
    tap_action:
      action: navigate
      navigation_path: '#cucina'

La parte che conta davvero è il blocco che inizia con type: custom:bubble-card.

Per ricreare l’esempio: vai su modifica dashboard, cerca la card Bubble Card e clicca per aggiungerla. In Card Type scegli Pop-up. Nel campo Hash scrivi il nome che vuoi dare al pop-up, ad esempio “cucina”. Clicca su Crea e a destra inserisci le card che vuoi mostrare nel pop-up — nell’esempio abbiamo aggiunto solo due card di luci.

Editor Bubble Card con sezioni Header, Pop-up settings, Trigger, Styling e Modules

Come vedi dagli screenshot, le configurazioni e le personalizzazioni possibili sono tantissime: prenditi il tempo di provarle per trovare quella più adatta a te.

2. Pulsante con slider per regolazione luminosità

Questo esempio crea uno slider per regolare la luminosità delle luci. Come Card Type scegli Button, come Button Type scegli Slider, poi seleziona l’entità che vuoi controllare.

Configurazione di un pulsante slider Bubble Card per regolare la luminosità
YAMLEsempio configurazione
type: custom:bubble-card
card_type: button
button_type: slider
sub_button:
  main: []
  bottom: []
entity: light.yeelight_color_0x36ed322  # sostituisci con la tua entità

3. Barra orizzontale per apertura pop-up

Questo esempio crea una barra di pulsanti in basso: sfruttando il pop-up #cucina creato in precedenza, possiamo aprirlo cliccando sul pulsante corrispondente.

Configurazione della horizontal buttons stack con pulsanti Cucina e Soggiorno

Come Card Type scegli Horizontal buttons stack, poi completa i campi con il link #cucina (stesso nome del pop-up creato in precedenza) e i campi opzionali nome, icona e la funzione auto_order in base alla presenza rilevata in una stanza.

Configurazione della horizontal buttons stack, pulsante Cucina con collegamento al pop-up
YAMLEsempio configurazione
type: custom:bubble-card
card_type: horizontal-buttons-stack
button_type: slider
sub_button:
  main: []
  bottom: []
entity: light.yeelight_cucina_gruppo  # sostituisci con la tua entità
1_entity: light.yeelight_cucina_gruppo  # sostituisci con la tua entità
1_link: '#cucina'
1_icon: mdi:countertop-outline
1_name: Cucina
2_link: '#living-room'
2_name: Soggiorno
2_icon: mdi:sofa

Bubble Card offre un grado di personalizzazione molto più ampio di questi tre esempi base. Per altri utilizzi (clima con fan, media player, calendari, sub-button) consulta la documentazione ufficiale su GitHub o gli esempi condivisi dalla community.

Pop-up: dalla configurazione base agli usi avanzati

5 esempi pratici

1. Controllo luci stanza completo — slider per la luce principale, griglia di tile per i punti luce singoli, scene rapide come sub-button:

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#luci-soggiorno'
name: Luci Soggiorno
icon: mdi:lightbulb-group
width_desktop: 540px
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.soggiorno_principale  # sostituisci con la tua entità
    name: Luce Principale
    show_state: true
    card_layout: large
  - type: grid
    columns: 2
    square: false
    cards:
      - type: tile
        entity: light.0xa4c138ac1637334f  # sostituisci con la tua entità
        name: Angolo Lettura
      - type: tile
        entity: light.0xa4c1380a031cae28  # sostituisci con la tua entità
        name: Tavolo
  - type: custom:bubble-card
    card_type: sub-buttons
    auto_order: false
    sub_button:
      main: []
      bottom:
        - entity: scene.new_scene  # sostituisci con la tua scena
        - entity: scene.cucina_luce_di_cortesia  # sostituisci con la tua scena
        - entity: scene.camera_da_letto_luce_lampada_in_arancione_soffusa_e_luce_principale_spenta  # sostituisci con la tua scena

2. Termostato con grafici storici — climate card, mini-graph-card per temperatura/umidità, preset rapidi:

Pop-up Bubble Card con termostato e grafico storico di temperatura e umidità
YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#clima-casa'
name: Climatizzazione
icon: mdi:thermostat
width_desktop: 600px
cards:
  - type: custom:bubble-card
    card_type: climate
    entity: climate.aqara_termostato  # sostituisci con la tua entità
    name: Termostato Principale
    show_state: true
    card_layout: large
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperatura_percepita_soggiorno  # sostituisci con la tua entità
        name: Temperatura
        color: '#FF6B6B'
      - entity: sensor.temperatura_percepita_esterno  # sostituisci con la tua entità
        name: Umidità
        color: '#4ECDC4'
        y_axis: secondary
    hours_to_show: 24
    points_per_hour: 4
    line_width: 2
    animate: true
  - type: horizontal-stack
    cards:
      - type: tile
        entity: sensor.0x84ba20fffed47cfc_temperature  # sostituisci con la tua entità
        name: Esterno
        icon: mdi:air-filter
        vertical: false
        features_position: bottom
      - type: tile
        entity: sensor.0xa4c138e9e1c7c89d_illuminance  # sostituisci con la tua entità
        name: Luminosità
        icon: mdi:molecule-co2
        vertical: false
        features_position: bottom
sub_button:
  main: []
  bottom: []
button_type: name

Richiede mini-graph-card via HACS; i preset devono essere supportati dal tuo termostato.

3. Media center con sorgenti rapide:

Pop-up media con card personalizzata WeSmart — trovi la card su WeSmart Custom Cards per Home Assistant e sul repository GitHub.

Pop-up Bubble Card per il controllo media player con editor YAML
YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#media-soggiorno'
name: Media Soggiorno
icon: mdi:play-circle
width_desktop: 540px
cards:
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.salotto  # sostituisci con la tua entità
    name: TV Soggiorno
    cover_background: true
    card_layout: large
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: media_player.salotto  # sostituisci con la tua entità
    name: Volume
    icon: mdi:volume-high
    attribute: volume_level
    min_value: 0
    max_value: 1
    step: 0.05
    card_layout: large
  - type: custom:wesmart-buttons-bar-card
    theme: light
    buttons:
      - name: Luci
        icon: mdi:lightbulb
        entity: light.soggiorno  # sostituisci con la tua entità
      - name: TV
        icon: mdi:television
        entity: switch.tv  # sostituisci con la tua entità
button_type: name
sub_button:
  main: []
  bottom: []

I nomi sorgente devono corrispondere esattamente a quelli del tuo media player (verificali in Strumenti per sviluppatori → Stati). La card wesmart-buttons-bar-card richiede l’installazione delle card WeSmart, ma puoi tranquillamente farne a meno e sostituirla con una card nativa a tuo piacimento.

4. Sicurezza con feed telecamere:

Sostituisci le telecamere dell’esempio con quelle che possiedi davvero.

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#sicurezza'
name: Sicurezza Casa
icon: mdi:shield-home
width_desktop: 800px
margin_top_desktop: 100px
cards:
  - type: alarm-panel
    entity: alarm_control_panel.allarme_casa  # sostituisci con la tua entità
    states:
      - arm_home
      - arm_away
      - arm_night
  - type: grid
    columns: 2
    square: false
    cards:
      - type: picture-entity
        entity: camera.ingresso  # sostituisci con la tua entità
        name: Ingresso
        camera_view: live
        show_state: false
      - type: picture-entity
        entity: camera.giardino  # sostituisci con la tua entità
        name: Giardino
        camera_view: live
        show_state: false
        fit_mode: cover
      - type: picture-entity
        entity: camera.garage  # sostituisci con la tua entità
        name: Garage
        camera_view: live
        show_state: false
      - type: picture-entity
        entity: camera.retro  # sostituisci con la tua entità
        name: Retro Casa
        camera_view: live
        show_state: false
  - type: horizontal-stack
    cards:
      - type: tile
        entity: binary_sensor.0xa4c138dccb4cb231_contact  # sostituisci con la tua entità
        name: Movimento Ingresso
      - type: tile
        entity: binary_sensor.movimento_giardino  # sostituisci con la tua entità
        name: Movimento Giardino
      - type: tile
        entity: binary_sensor.porta_garage  # sostituisci con la tua entità
        name: Porta Garage
sub_button:
  main: []
  bottom: []
button_type: name

Chi ha seguito la guida Allarme senza centrale può riusare qui lo stesso alarm_control_panel.

5. Meteo dettagliato:

Esempio con card meteo personalizzate WeSmart, ancora in fase di sviluppo, che puoi comunque sostituire con le card meteo native di Home Assistant.

Pop-up meteo Bubble Card con card personalizzate WeSmart Weather e grafico sensori
YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#meteo'
name: Meteo Dettagliato
icon: mdi:weather-partly-cloudy
width_desktop: 600px
cards:
  - type: custom:wesmart-weather-card
    entity: weather.home  # sostituisci con la tua entità
    title: Milano
    theme: dark
    forecast_type: daily
    forecast_days: 5
    show_humidity: true
    show_wind: true
    show_pressure: false
    show_visibility: false
  - type: custom:wesmart-chart-card
    title: Sensori Casa
    theme: light
    entities:
      - sensor.temperatura_percepita_esterno  # sostituisci con la tua entità
      - entity: sensor.temperatura_percepita_soggiorno  # sostituisci con la tua entità
        name: Umidità Bagno
        icon: mdi:water-percent
      - entity: sensor.0x00158d008bbe7678_humidity  # sostituisci con la tua entità
        name: Umidità
  - type: grid
    columns: 3
    square: false
    cards:
      - type: tile
        entity: sensor.temperatura_percepita_esterno  # sostituisci con la tua entità
        name: Temperatura
        icon: mdi:thermometer
      - type: tile
        entity: sensor.0x00158d008bbe7678_humidity  # sostituisci con la tua entità
        name: Umidità
        icon: mdi:water-percent
      - type: tile
        entity: sensor.pressione_1h_fa  # sostituisci con la tua entità
        name: Pressione
        icon: mdi:gauge
      - type: tile
        entity: sensor.velocita_vento  # sostituisci con la tua entità
        name: Vento
        icon: mdi:weather-windy
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperatura_percepita_soggiorno  # sostituisci con la tua entità
        name: Temperatura
        color: '#FF6B6B'
      - entity: sensor.0x84ba20fffed47cfc_humidity  # sostituisci con la tua entità
        name: Umidità
        color: '#4ECDC4'
        y_axis: secondary
    hours_to_show: 24
    points_per_hour: 4
    line_width: 2
    animate: true
button_type: name
sub_button:
  main: []
  bottom: []

I sensori meteo dipendono dall’integrazione usata (Met.no, OpenWeatherMap): adatta i nomi entità alla tua configurazione.

Trigger automatici

I pop-up possono aprirsi da soli quando una condizione si verifica, senza bisogno di un bottone.

Apertura su sensore:

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#sicurezza-auto'
name: Alert Sicurezza
icon: mdi:alert
width_desktop: 540px
trigger:
  - condition: state
    entity: binary_sensor.movimento_ingresso  # sostituisci con la tua entità
    state: "on"
cards:
  - type: picture-entity
    entity: camera.ingresso  # sostituisci con la tua entità
    camera_view: live
  - type: tile
    entity: binary_sensor.movimento_ingresso  # sostituisci con la tua entità
    name: Sensore Movimento

Con chiusura automatica (notifica temporanea che si chiude da sola):

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#alert-temporaneo'
name: Notifica Temporanea
icon: mdi:bell-alert
trigger:
  - condition: state
    entity: binary_sensor.porta_garage  # sostituisci con la tua entità
    state: "on"
auto_close: 30000
cards: []

Si chiude da sola dopo 30000 ms (30 secondi).

Trigger multipli (si apre se una qualsiasi delle condizioni è vera):

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#alert-multiplo'
name: Alert Casa
icon: mdi:home-alert
trigger:
  - condition: state
    entity: binary_sensor.movimento_ingresso  # sostituisci con la tua entità
    state: "on"
  - condition: state
    entity: binary_sensor.porta_principale  # sostituisci con la tua entità
    state: "on"
  - condition: state
    entity: binary_sensor.finestra_soggiorno  # sostituisci con la tua entità
    state: "on"
cards: []

Trigger via input_boolean (utile per aprirlo da un’automazione o uno script):

YAMLEsempio configurazione
# In configuration.yaml
input_boolean:
  mostra_clima:
    name: Mostra Pop-up Clima
    icon: mdi:thermometer

# Nel pop-up
type: custom:bubble-card
card_type: pop-up
hash: '#clima-auto'
name: Controllo Clima
icon: mdi:thermostat
trigger:
  - condition: state
    entity: input_boolean.mostra_clima
    state: "on"
cards: []

Azioni all’apertura e alla chiusura (es. accendere luci ambiente quando parte un film):

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#media-smart'
name: Media Center
icon: mdi:play
trigger:
  - condition: state
    entity: media_player.tv_soggiorno  # sostituisci con la tua entità
    state: "playing"
open_action:
  action: call-service
  service: light.turn_on
  service_data:
    entity_id: light.tv_backlight  # sostituisci con la tua entità
    brightness: 50
close_action:
  action: call-service
  service: light.turn_off
  service_data:
    entity_id: light.tv_backlight  # sostituisci con la tua entità
cards:
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.tv_soggiorno  # sostituisci con la tua entità

Personalizzazione avanzata

Dimensioni e posizionamento (proprietà invariate dalla 3.2.0):

YAMLEsempio configurazione
width_desktop: 700px
margin_top_desktop: 100px
  • Metà schermo: margin_top_desktop: 50vh
  • Altezza fissa 400px: margin_top_desktop: calc(100vh - 400px)
  • Full-screen: margin_top_desktop: 0px
  • Su mobile con header nascosto: margin_top_mobile: -56px

Backdrop e trasparenze:

YAMLEsempio configurazione
bg_opacity: 85
bg_blur: 15
bg_color: '#1a1a1a'
shadow_opacity: 60

Il blur funziona solo se bg_opacity è sotto 100. Per nasconderlo del tutto su tutti i pop-up: hide_backdrop: true sul primo pop-up della dashboard.

CSS personalizzato:

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#custom-style'
name: Pop-up Personalizzato
icon: mdi:palette
width_desktop: 600px
bg_opacity: 90
bg_blur: 10
cards: []
styles: |
  .bubble-pop-up {
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
  .bubble-header-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
  }
  .bubble-pop-up-container {
    padding: 16px;
  }

Nota sui selettori: dalla v3.2.0 le classi CSS dei pop-up usano il prefisso bubble- (.bubble-pop-up, .bubble-header-container, .bubble-pop-up-container), non più i nomi generici .pop-up / .pop-up-header delle versioni precedenti — verificabile nel sorgente CSS ufficiale.

Template pronti all’uso

Stanza completa:

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#stanza-template'
name: Nome Stanza
icon: mdi:home
width_desktop: 600px
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.stanza_principale  # sostituisci con la tua entità
    name: Luci Principali
    card_layout: large
  - type: custom:bubble-card
    card_type: climate
    entity: climate.stanza  # sostituisci con la tua entità
    name: Temperatura
    card_layout: large
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.stanza  # sostituisci con la tua entità
    name: Audio
    card_layout: large
  - type: grid
    columns: 2
    cards:
      - type: tile
        entity: switch.stanza_1  # sostituisci con la tua entità
      - type: tile
        entity: switch.stanza_2  # sostituisci con la tua entità

Dashboard informazioni:

YAMLEsempio configurazione
type: custom:bubble-card
card_type: pop-up
hash: '#info-casa'
name: Informazioni Casa
icon: mdi:information
width_desktop: 700px
bg_opacity: 2
bg_blur: 15
bg_color: '#1a1a1a'
shadow_opacity: 60
cards:
  - type: grid
    columns: 3
    cards:
      - type: tile
        entity: sensor.batteria_sensore_porta  # sostituisci con la tua entità
      - type: tile
        entity: sensor.umidita_camera  # sostituisci con la tua entità
      - type: tile
        entity: sensor.consumo_energia_lavatrice  # sostituisci con la tua entità
  - type: custom:mini-graph-card
    entities:
      - sensor.temperatura_camera  # sostituisci con la tua entità
    hours_to_show: 24
    line_width: 2
  - type: entities
    entities:
      - entity: binary_sensor.connessione_internet  # sostituisci con la tua entità
        name: Connessione Internet
      - entity: sensor.dispositivi_wifi_connessi  # sostituisci con la tua entità
        name: Dispositivi WiFi
      - entity: sensor.spazio_disco_ha  # sostituisci con la tua entità
        name: Spazio Disco HA

Esempi di dashboard complete

Le sezioni precedenti mostrano singole card e singoli pop-up. Qui trovi invece 5 dashboard complete — pagine intere costruite con la vista sections di Home Assistant e più card Bubble Card combinate — pronte da copiare e adattare alle tue entità.

Come usare questi template

  1. Copia il codice YAML dell’esempio che ti interessa
  2. Crea una nuova vista nella tua dashboard
  3. Passa alla modalità YAML (icona in alto a destra)
  4. Incolla il codice sostituendo quello esistente
  5. Personalizza le entità con i tuoi device
  6. Salva e verifica il risultato

Per trovare i nomi delle tue entità vai su Strumenti per sviluppatori → Stati e cerca nel formato dominio.nome_entità (es. light.lampada_salotto).

Esempio 1: Dashboard Soggiorno Completa

Controllo luci principale con slider, gestione termostato, media player per TV/streaming, scene rapide e informazioni meteo — layout a griglia che si adatta automaticamente da due colonne su desktop a colonna singola su mobile.

YAMLEsempio configurazione
type: sections
max_columns: 1
title: Bubble Dashboard
path: bubble-dashboard
sections:
  - type: grid
    cards:
      - type: heading
        heading: Minimal Dahboard
        heading_style: title
        icon: mdi:monitor-dashboard
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#soggiorno-card"
            button_type: name
            sub_button:
              main: []
              bottom: []
            name: Soggiorno
            icon: mdi:sofa
            bg_color: rgba(255, 255, 255, 0.18)
            bg_blur: "40"
            backdrop_blur: "0"
            shadow_opacity: "0"
            bg_opacity: "12"
            styles: ""
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            sub_button:
              main:
                - entity: light.soggiorno
                  sub_button_type: default
                  content_layout: icon-left
                  show_attribute: true
                  attribute: brightness
                  force_icon: false
                  show_icon: true
                  light_background: true
                  state_background: true
                  scrolling_effect: true
              bottom: []
            entity: light.soggiorno
            show_state: true
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            sub_button:
              main:
                - entity: light.soggiorno
                  sub_button_type: default
                  content_layout: icon-left
                  show_attribute: true
                  attribute: brightness
                  force_icon: false
                  show_icon: true
                  light_background: true
                  state_background: true
                  scrolling_effect: true
              bottom: []
            entity: light.cucina_tutte_le_luci
            show_state: true
            icon: mdi:countertop-outline
      - type: tile
        grid_options:
          columns: 12
          rows: 2
        entity: light.luci_tutte
        name: Luci
        vertical: true
        tap_action:
          action: navigate
          navigation_path: "#soggiorno-card"
        icon_tap_action:
          action: none
        features_position: bottom
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              background: var(--ha-card-background, var(--card-background-color));
              border: none !important;
              border-radius: 0 !important;
              background: #e4e8f0 !important;
              color: var(--primary-text-color);
            }
            .tile {
              padding: 8px !important;
            }
            .tile::before {
              box-shadow: none !important;
            }
      - type: custom:bubble-card
        card_type: climate
        sub_button:
          main:
            - name: HVAC modes menu
              select_attribute: hvac_modes
              state_background: false
              show_arrow: false
              sub_button_type: select
          bottom: []
        entity: climate.aqara_termostato_soggiorno  # sostituisci con la tua entità
        name: Riscaldamento Soggiorno
        show_state: false
        show_last_changed: false
        show_last_updated: false
        show_attribute: false
        attribute: supported_features
        state_color: true
      - type: custom:bubble-card
        card_type: media-player
        sub_button:
          main: []
          bottom: []
        entity: media_player.soggiorno  # sostituisci con la tua entità
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        sub_button:
          main: []
          bottom: []
        entity: scene.mattina  # sostituisci con la tua scena
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        sub_button:
          main: []
          bottom: []
        entity: scene.serata  # sostituisci con la tua scena
header:
  card:
    type: markdown
    text_only: true
    content: |-
      # Ciao {{user}}
      Esempio di Dashboard con Bubble Card
cards: []

Sostituisci light.soggiorno/light.cucina_tutte_le_luci con le tue entità luce, climate.aqara_termostato_soggiorno con il tuo termostato, e crea (o rimuovi) le scene corrispondenti.

Tip: usa scrolling_effect: true per animazioni fluide al tocco — rende l’interfaccia più reattiva e moderna.

Dashboard di esempio Bubble Card per il soggiorno

Esempio 2: Control Center Camera da Letto

Dashboard minimalista per la camera, focalizzata su comfort e semplicità d’uso notturno: lampada comodino con controllo intensità, termostato con preset notte, sveglia/timer e modalità “Buonanotte” one-tap.

YAMLEsempio configurazione
type: sections
max_columns: 1
title: Camera da Letto
sections:
  - type: grid
    cards:
      - type: heading
        heading: Camera da Letto
        heading_style: title
        icon: mdi:bed
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.lampada_comodino
        name: Lampada
        show_state: true
        icon: mdi:lamp
        sub_button:
          main:
            - entity: light.lampada_comodino
              sub_button_type: slider
              attribute: brightness
              show_background: true
              show_icon: true
            - entity: light.lampada_comodino
              sub_button_type: slider
              attribute: color_temp
              show_background: true
              show_icon: true
          bottom: []
      - type: custom:bubble-card
        card_type: climate
        entity: climate.aqara_termostato
        name: Temperatura
        show_state: true
        state_color: true
        sub_button:
          main:
            - name: HVAC modes
              select_attribute: hvac_modes
              sub_button_type: select
              state_background: false
              show_arrow: false
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: timer.sveglia
        name: Sveglia
        icon: mdi:alarm
        show_state: true
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: scene.buonanotte
        name: Buonanotte
        icon: mdi:weather-night
        button_action:
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: scene.buonanotte
        sub_button:
          main: []
          bottom: []
header:
  card:
    type: markdown
    text_only: true
    content: |-
      # Benvenuto in Camera
      Controlla luci, clima e tapparelle
cards: []

La scena “Buonanotte” può attivare automaticamente: spegnimento di tutte le luci tranne quella del comodino al 10%, chiusura tapparelle, abbassamento termostato a 18 gradi e attivazione della modalità Non disturbare sullo smartphone.

Esempio 3: Dashboard Meteo e Clima Casa

Vista dedicata al monitoraggio meteo esterno e clima interno, utile per gestire riscaldamento e ventilazione: temperatura esterna e previsioni, temperatura/umidità per stanza, alert finestre aperte con riscaldamento attivo.

YAMLEsempio configurazione
type: sections
max_columns: 1
title: Meteo e Sensori
sections:
  - type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: weather.casa  # sostituisci con la tua entità
        name: Meteo Casa
        show_state: true
        card_layout: large
        sub_button:
          main:
            - entity: sensor.temperatura_soggiorno  # sostituisci con la tua entità
              name: Soggiorno
              show_state: true
              show_icon: true
              icon: mdi:thermometer
            - entity: sensor.temperatura_camera  # sostituisci con la tua entità
              name: Camera
              show_state: true
              show_icon: true
              icon: mdi:thermometer
            - entity: sensor.temperatura_percepita_esterno  # sostituisci con la tua entità
              name: Esterno
              show_state: true
              show_icon: true
              icon: mdi:thermometer
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: sensor.umidita_soggiorno  # sostituisci con la tua entità
        name: Umidità e Finestre
        show_state: true
        icon: mdi:water-percent
        sub_button:
          main:
            - entity: binary_sensor.alert_finestre
              name: Finestre
              show_state: true
              show_icon: true
              icon: mdi:window-open-variant
              state_background: true
          bottom: []
header:
  card:
    type: markdown
    text_only: true
    content: |-
      # Meteo e Clima
      Temperatura e umidità in casa
cards: []

Automazione suggerita: crea un’automazione che avvisa quando una finestra resta aperta più di 10 minuti con il riscaldamento acceso — risparmio garantito.

Anteprima della dashboard media center dell'esempio successivo

Esempio 4: Media Center Completo

Dashboard dedicata al controllo dei dispositivi multimediali: TV con cover art e volume, speaker multi-room, playlist rapide, scene “Cinema” e “Musica”.

YAMLEsempio configurazione
type: sections
max_columns: 2
title: Media e Intrattenimento
sections:
  - type: grid
    cards:
      - type: heading
        heading: Media Center
        heading_style: title
        icon: mdi:multimedia
        grid_options:
          columns: 12
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.salotto  # sostituisci con la tua entità
        name: TV Soggiorno
        show_state: true
        show_last_changed: false
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.speaker_soggiorno  # sostituisci con la tua entità
        name: Speaker Soggiorno
        show_state: true
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: Relax
        icon: mdi:music
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: media_player.play_media
            service_data:
              entity_id: media_player.speaker_soggiorno
              media_content_type: playlist
              media_content_id: spotify:playlist:relax
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: Party
        icon: mdi:dance-ballroom
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: media_player.play_media
            service_data:
              entity_id: media_player.speaker_soggiorno
              media_content_type: playlist
              media_content_id: spotify:playlist:party
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: scene.cinema
        name: Cinema
        icon: mdi:movie-open
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: scene.cinema
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: scene.musica
        name: Musica
        icon: mdi:music-note
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: scene.musica
        sub_button:
          main: []
          bottom: []
header:
  card:
    type: markdown
    text_only: true
    content: |-
      # Media Center
      TV, musica e scene multimediali
cards: []

Integrazioni consigliate: Spotify (nativa in Home Assistant), Plex o Kodi per media server locali, Philips Hue Entertainment per luci sincronizzate ai contenuti TV, un Universal Remote per dispositivi IR/RF meno recenti.

Anteprima della dashboard mobile dell'esempio successivo

Esempio 5: Dashboard Mobile Ottimizzata

Layout verticale pensato per lo smartphone: controlli più usati in alto, scene one-tap grandi e facili da premere, stato casa (luci, porte, allarme), quick action “Uscendo”/“Tornando”.

YAMLEsempio configurazione
type: sections
max_columns: 1
title: Controllo Casa
sections:
  - type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: light.luci_tutte
        name: Stato Casa
        show_state: true
        icon: mdi:home
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: script.uscendo
        name: Uscendo
        icon: mdi:exit-run
        card_layout: large
        grid_options:
          columns: 12
          rows: 2
        button_action:
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.uscendo
        sub_button:
          main: []
          bottom: []
        styles: |
          .bubble-button-card-container {
            height: 80px !important;
          }
      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: script.tornando
        name: Tornando a Casa
        icon: mdi:home-import-outline
        card_layout: large
        grid_options:
          columns: 12
          rows: 2
        button_action:
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.tornando
        sub_button:
          main: []
          bottom: []
        styles: |
          .bubble-button-card-container {
            height: 80px !important;
          }
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.luci_tutte
        name: Luci Principali
        show_state: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - entity: light.luci_principali
              sub_button_type: slider
              attribute: brightness
              show_background: true
              show_icon: true
          bottom: []
      - type: custom:bubble-card
        card_type: climate
        entity: climate.aqara_termostato
        name: Clima Casa
        show_state: true
        state_color: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - name: HVAC modes
              select_attribute: hvac_modes
              sub_button_type: select
              state_background: false
              show_arrow: false
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: alarm_control_panel.allarme
        name: Allarme
        show_state: true
        state_color: true
        grid_options:
          columns: 6
        sub_button:
          main: []
          bottom: []
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: binary_sensor.porta_ingresso  # sostituisci con la tua entità
        name: Porta
        show_state: true
        state_color: true
        grid_options:
          columns: 6
        sub_button:
          main: []
          bottom: []
header:
  card:
    type: markdown
    text_only: true
    content: |-
      # Controllo Casa
      Gestisci luci, clima e sicurezza
cards: []

Gli script “Uscendo” e “Tornando” possono automatizzare sequenze complesse con un tap:

  • Uscendo: spegni tutte le luci, imposta il termostato in eco mode, chiudi le tapparelle, attiva l’allarme, blocca la smart lock
  • Tornando: accendi le luci d’ingresso, termostato a temperatura comfort, disattiva l’allarme, apri le tapparelle (se è giorno)

Dashboard completa con Bubble Card in stile Liquid Glass

Mix & match: combinare gli esempi

Il vero potenziale di questi template emerge quando li combini per creare la tua dashboard personalizzata. Due approcci:

  • Multi-vista: una vista per ogni contesto — Home con quick action mobile, una vista per stanza (esempi 1 e 2), una vista Clima (esempio 3), una vista Media (esempio 4)
  • Dashboard unica: unisci i componenti migliori in una sola vista — quick action dell’esempio 5 in alto, controlli stanza dell’esempio 1 al centro, media player dell’esempio 4 in basso, widget meteo dell’esempio 3 in sidebar

Best practice di layout: gerarchia visiva (elementi più usati in alto), raggruppamento logico per funzione o stanza, spazi bianchi con vertical-stack per separare le sezioni, test su mobile/tablet/desktop, set di icone coerente (MDI consigliato).

Ecco un esempio di dashboard combinata che applica questi principi su un’unica pagina, con tutte le sezioni precedenti unite in viste separate:

YAMLEsempio configurazione
type: sections
max_columns: 1
title: Dashboard Completa
path: home
sections:
  # ========================================
  # SEZIONE 1: QUICK ACTIONS
  # ========================================
  - type: grid
    title: Quick Actions
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: light.luci_tutte
        name: Stato Casa
        show_state: true
        icon: mdi:home
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []

      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: script.uscendo
        name: Uscendo
        icon: mdi:exit-run
        card_layout: large
        grid_options:
          columns: 6
          rows: 2
        button_action:
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.uscendo
        sub_button:
          main: []
          bottom: []
        styles: |
          .bubble-button-card-container {
            height: 80px !important;
          }

      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: script.tornando
        name: Tornando a Casa
        icon: mdi:home-import-outline
        card_layout: large
        grid_options:
          columns: 6
          rows: 2
        button_action:
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.tornando
        sub_button:
          main: []
          bottom: []
        styles: |
          .bubble-button-card-container {
            height: 80px !important;
          }

  # ========================================
  # SEZIONE 2: SOGGIORNO
  # ========================================
  - type: grid
    title: Soggiorno
    cards:
      # Pop-up Soggiorno
      - type: custom:bubble-card
        card_type: pop-up
        hash: "#soggiorno-card"
        name: Soggiorno
        icon: mdi:sofa
        bg_color: rgba(255, 255, 255, 0.18)
        bg_blur: "40"
        backdrop_blur: "0"
        shadow_opacity: "0"
        bg_opacity: "12"
        show_state: false
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []

      # Luci Soggiorno
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.soggiorno
        name: Luci Soggiorno
        show_state: true
        card_layout: large
        grid_options:
          columns: 6
        sub_button:
          main:
            - entity: light.soggiorno
              sub_button_type: slider
              attribute: brightness
              show_background: true
              show_icon: true
          bottom: []

      # Luci Cucina
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.cucina_tutte_le_luci
        name: Luci Cucina
        icon: mdi:countertop-outline
        show_state: true
        card_layout: large
        grid_options:
          columns: 6
        sub_button:
          main:
            - entity: light.cucina_tutte_le_luci
              sub_button_type: slider
              attribute: brightness
              show_background: true
              show_icon: true
          bottom: []

      # Tile Tutte le Luci
      - type: tile
        grid_options:
          columns: 12
          rows: 2
        entity: light.luci_tutte
        name: Tutte le Luci
        vertical: true
        tap_action:
          action: navigate
          navigation_path: "#soggiorno-card"
        icon_tap_action:
          action: none
        features_position: bottom
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              background: #e4e8f0 !important;
              border: none !important;
              border-radius: 8px !important;
              color: var(--primary-text-color);
            }
            .tile {
              padding: 8px !important;
            }
            .tile::before {
              box-shadow: none !important;
            }

      # Termostato Soggiorno
      - type: custom:bubble-card
        card_type: climate
        entity: climate.0x3c2ef5fffebad64b
        name: Riscaldamento
        show_state: true
        state_color: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - name: HVAC modes
              select_attribute: hvac_modes
              sub_button_type: select
              state_background: false
              show_arrow: false
          bottom: []

  # ========================================
  # SEZIONE 3: CAMERA DA LETTO
  # ========================================
  - type: grid
    title: Camera da Letto
    cards:
      # Lampada comodino
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.lampada_comodino
        name: Lampada
        show_state: true
        icon: mdi:lamp
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - entity: light.lampada_comodino
              sub_button_type: slider
              attribute: brightness
              show_background: true
              show_icon: true
            - entity: light.lampada_comodino
              sub_button_type: slider
              attribute: color_temp
              show_background: true
              show_icon: true
          bottom: []

      # Termostato camera
      - type: custom:bubble-card
        card_type: climate
        entity: climate.aqara_termostato
        name: Temperatura
        show_state: true
        state_color: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - name: HVAC modes
              select_attribute: hvac_modes
              sub_button_type: select
              state_background: false
              show_arrow: false
          bottom: []

      # Sveglia e Scena Buonanotte
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: timer.sveglia
        name: Sveglia
        icon: mdi:alarm
        show_state: true
        grid_options:
          columns: 6
        sub_button:
          main: []
          bottom: []

      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: scene.buonanotte
        name: Buonanotte
        icon: mdi:weather-night
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: scene.buonanotte
        sub_button:
          main: []
          bottom: []

  # ========================================
  # SEZIONE 4: METEO E SENSORI
  # ========================================
  - type: grid
    title: Meteo e Clima
    cards:
      # Meteo con temperature
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: weather.casa
        name: Meteo Casa
        show_state: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - entity: sensor.0x84ba20fffed47cfc_temperature
              name: Soggiorno
              show_state: true
              show_icon: true
              icon: mdi:thermometer
            - entity: sensor.0x00158d008bbe7678_temperature
              name: Camera
              show_state: true
              show_icon: true
              icon: mdi:thermometer
            - entity: sensor.temperatura_percepita_esterno
              name: Esterno
              show_state: true
              show_icon: true
              icon: mdi:thermometer
          bottom: []

      # Umidità e finestre
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: sensor.0x84ba20fffed47cfc_humidity
        name: Umidità
        show_state: true
        icon: mdi:water-percent
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main:
            - entity: binary_sensor.alert_finestre
              name: Finestre
              show_state: true
              show_icon: true
              icon: mdi:window-open-variant
              state_background: true
          bottom: []

  # ========================================
  # SEZIONE 5: MEDIA CENTER
  # ========================================
  - type: grid
    title: Media Center
    cards:
      # TV Soggiorno
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.salotto
        name: TV Soggiorno
        show_state: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []

      # Speaker
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.echo_plus_di_massimo
        name: Echo Plus
        show_state: true
        card_layout: large
        grid_options:
          columns: 12
        sub_button:
          main: []
          bottom: []

      # Playlist e Scene
      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: Relax
        icon: mdi:music
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: media_player.play_media
            service_data:
              entity_id: media_player.speaker_soggiorno
              media_content_type: playlist
              media_content_id: spotify:playlist:relax
        sub_button:
          main: []
          bottom: []

      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: Party
        icon: mdi:dance-ballroom
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: media_player.play_media
            service_data:
              entity_id: media_player.speaker_soggiorno
              media_content_type: playlist
              media_content_id: spotify:playlist:party
        sub_button:
          main: []
          bottom: []

      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: scene.cinema
        name: Cinema
        icon: mdi:movie-open
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: scene.cinema
        sub_button:
          main: []
          bottom: []

      - type: custom:bubble-card
        card_type: button
        button_type: name
        entity: scene.musica
        name: Musica
        icon: mdi:music-note
        grid_options:
          columns: 6
        button_action:
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: scene.musica
        sub_button:
          main: []
          bottom: []

  # ========================================
  # SEZIONE 6: SICUREZZA
  # ========================================
  - type: grid
    title: Sicurezza
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: alarm_control_panel.allarme
        name: Allarme
        show_state: true
        state_color: true
        card_layout: large
        grid_options:
          columns: 6
        sub_button:
          main: []
          bottom: []

      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: binary_sensor.0xa4c138dccb4cb231_contact
        name: Porta Ingresso
        show_state: true
        state_color: true
        card_layout: large
        grid_options:
          columns: 6
        sub_button:
          main: []
          bottom: []

header:
  card:
    type: markdown
    text_only: true
    content: |-
      # Ciao {{user}}!
      Dashboard completa con Bubble Card 3.1
      **{{now().strftime('%A %d %B %Y')}}**
cards: []

Tip avanzato: usa Browser Mod insieme a Bubble Card per creare popup dinamici che si aprono al click — utile per controllare gruppi di luci o dettagli sensori senza cambiare vista.

Non esiste la dashboard “perfetta” uguale per tutti: il layout migliore è quello che si adatta alle tue abitudini e ai tuoi dispositivi. Usa questi template come punto di partenza, testali per qualche giorno, poi itera e personalizza.

Personalizzazione visiva

Bubble Card supporta nativamente la sovrascrittura tramite variabili CSS all’interno dei temi Lovelace:

  • --bubble-main-background-color (colore di sfondo)
  • --bubble-accent-color (colore d’accento/stato attivo)
  • --bubble-border-radius (raggio dei bordi)

Sono inoltre disponibili moduli avanzati opzionali (tramite il Patreon del creatore) come Bubble Badges v2, Bubble Weather (sfondi animati dinamici) e Bubble Neon (colorazione dinamica autonoma per ogni card).

Cronologia versioni: da 3.0 a oggi

v3.0 (luglio 2025) — i Moduli

La versione 3.0 ha introdotto i Moduli: stili e template personalizzati gestibili dall’editor senza toccare CSS o JavaScript, con un Module Store per installarli in un clic. Ha aggiunto anche la card Calendario, slider più sicuri (richiedono di tenere premuto prima di modificare un valore) e l’ingrandimento universale delle card.

v3.1.0 (gennaio 2026) — sub-button con slider

Con la 3.1.0 arriva Bubble Card Tools, il componente che gestisce i moduli come file YAML invece che come entità. I sub-button possono diventare slider o dropdown, non solo pulsanti, ed è nata la card “Sub-buttons only” con modalità footer per creare barre di navigazione fisse. L’editor è diventato fino a 100 volte più veloce sulle dashboard con molti pop-up.

Le patch 3.1.3/3.1.4 (marzo 2026) hanno risolto i problemi di compatibilità introdotti da Home Assistant 2026.3: dropdown rotti nell’editor, scrolling indesiderato, pulsante “Copia YAML” non funzionante.

v3.2.0 (maggio 2026) — i pop-up cambiano architettura

Il salto più grande dell’intero progetto. I pop-up non hanno più bisogno di un vertical-stack che li contenga: sono card standalone a tutti gli effetti, con un editor drag-and-drop nativo. Sono arrivate anche nuove modalità — Adaptive (si adatta al contenuto), Dialog centrato, Adaptive dialog — più uno stile “Classic” con header tradizionale, pulsante “indietro” per navigare tra pop-up annidati, e un performance_mode per i dispositivi più lenti.

Nota: le configurazioni pop-up create prima della 3.2.0 continuano a funzionare — l’editor offre una migrazione automatica guidata, non serve riscrivere nulla a mano.

Le patch 3.2.1 e 3.2.2 (fine maggio) hanno risolto i problemi di stabilità emersi durante la migrazione dei pop-up esistenti.

v3.2.3 e successive (giugno 2026) — suggerimenti nel picker

Da qui Bubble Card si aggancia al nuovo picker per entità di Home Assistant 2026.6: scegli un’entità e ricevi già una configurazione Bubble Card pronta, con anteprima live — funzionalità aggiunta da Piitaya, lo sviluppatore di Mushroom Card. In parallelo l’editor è stato localizzato in 64 lingue, italiano incluso.

v3.2.5 (10 luglio 2026) — versione attuale

L’ultima release aggiunge il supporto al tilt per le card cover (apertura/chiusura dell’inclinazione per tapparelle veneziane, con pulsanti dedicati o slider), risolve un bug che disabilitava il pulsante “Salva” nell’editor dei pop-up standalone, e sistema la compatibilità con custom:grid-layout.

Nel mio setup la migrazione e l’aggiornamento, come al solito, non hanno dato problemi. Il passaggio dal dover avvolgere tutto in un vertical-stack all’essere nativo è un bel passo avanti. Il componente resta comunque, a mio avviso, piuttosto complesso: le voci e le configurazioni sono tante e a volte ci si perde tra i menu. Bisogna fare attenzione e acquisire familiarità — forse una maggiore semplificazione sarebbe necessaria. L’alto grado di personalizzazione e una community di valore restano comunque un punto a favore.

Compatibilità e note tecniche

Compatibilità

Versione minima HA2023.9.0+
Versione Bubble Cardv3.2.5
PosizionamentoCard indipendente
PerformanceDisabilita animazioni con 10+ entità
AggiornamentiAutomatici via HACS

Domande frequenti

Bubble Card è gratuita?

Sì, la versione completa è open source e gratuita. Esistono solo alcuni moduli estetici opzionali riservati ai supporter Patreon.

Funziona senza HACS?

Sì, inserendo manualmente lo script JS nella cartella www/ e registrandolo nelle risorse Lovelace.

Quante card si possono inserire in un pop-up?

Non ci sono limiti numerici rigidi; per mantenere l’interfaccia reattiva è preferibile limitare le entità con aggiornamenti real-time molto frequenti all’interno dello stesso pannello.

Supporta i temi Lovelace?

Sì, la card rispetta le variabili d’ambiente globali e permette un’integrazione completa con temi personalizzati.

Conclusione

La Bubble Card resta la soluzione più versatile per rendere la dashboard Lovelace di Home Assistant interattiva ed elegante. Con la v3.2.5 il progetto ha completato il passaggio a pop-up standalone, più veloci e più semplici da configurare rispetto al passato, e continua a essere aggiornato con regolarità dal suo autore.

Per approfondire, consulta il repository GitHub ufficiale di Bubble Card con tutti gli esempi disponibili, o rivedi i 5 esempi di dashboard complete più sopra in questa guida. 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.

Foto di Massimo Di Vona

Massimo Di Vona

Esperto di Smart Home e domotica, fondatore di WeAreSmart.it.

Massimo si occupa di tendenze tecnologiche da oltre un decennio, con un'attenzione particolare alle automazioni domestiche e alla smart home, ambiti che ha approfondito in particolare con Home Assistant. Si interessa anche di intelligenza artificiale e delle sue applicazioni nella tecnologia consumer.

Home AssistantBubble CardLovelaceHACSDashboardDomotica

Continua a Leggere

Approfondisci con altri articoli su Home Assistant

Come installare HACS su Home Assistant
Home assistant

Come installare HACS su Home Assistant (Guida 2026)

Come installare HACS su Home Assistant per accedere a migliaia di componenti personalizzati e card aggiuntive. Guida completa a HACS 2.0.

Leggi l'articolo
Confronto tra Bubble Card, Mushroom Card e Button Card
Home assistant

Bubble Card vs Mushroom vs Button Card

Confronto completo tra Bubble Card, Mushroom Card e Button Card per Home Assistant. Scopri quale scegliere per la tua dashboard con esempi YAML pratici.

Leggi l'articolo