Bubble Card is a minimalist and customizable card collection for Home Assistant with a nice pop-up touch.

Installation | Configuration | Pop-up | Horizontal buttons stack | Button | Custom button | Cover | Separator | Empty column | Actions | Full example | Styling | Conflicts | Help

Home Assistant lowest supported version: 2023.9.0

1. Download this file: bubble-card.js
2. Add this file into your <config>/www folder
3. On your dashboard click on the icon at the right top corner then on Edit dashboard
4. Click again on that icon and then on Manage resources
5. Click on Add resource
6. Copy and paste this: /local/bubble-card.js?v=1
7. Click on JavaScript Module then Create
8. Go back and refresh your page
9. You can now click on Add card in the bottom right corner and search for Bubble Card
10. After any update of the file you will have to edit /local/bubble-card.js?v=1 and change the version to any higher number

This method allows you to get updates directly in the HACS main page

1. Download HACS following the instructions on https://hacs.xyz/docs/setup/download
2. Proceed to the initial configuration following the instructions on https://hacs.xyz/docs/configuration/basic
3. On your sidebar go to HACS > Integrations
4. click on the icon at the right top corner then on Custom repositories
5. For the repository add this: https://github.com/Clooos/Bubble-Card
6. For the category select Lovelace then click Add
7. Now click on Bubble Card then on the Download button
8. Go back on your dashboard and click on the icon at the right top corner then on Edit dashboard
9. You can now click on Add card in the bottom right corner and search for Bubble Card

Coming soon in the HACS default repo (still waiting for validation).

There is also a detailed setup video from BeardedTinker, thanks a lot to him!
▶ YouTube - Pop-up cards with Bubble Card in Home Assistant

Most options can be configured in the GUI editor, except for custom styles, custom buttons and tap actions.

This card allows you to convert any vertical-stack card into a pop-up. Each pop-up must have an unique hash (e.g. '#kitchen'), you can open them with any card that allows navigation_path or with the horizontal-buttons-stack that is included. This card come with an header for your pop-up, if you add an entity to this card you will have a button to toggle this entity in that header, you can also display the state of an entity (e.g. the temperature of a room).

1. To add a pop-up you first need to add a vertical-stack card to your dashboard
2. This vertical-stack must be after all your other cards and before your horizontal-buttons-stack if you have one
3. Now add a Bubble Card with the type pop-up in it
4. Just fill in the required inputs and the ones you need

A pop-up

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:fridge
    entity: light.kitchen
    state: sensor.kitchen_temperature
    back_open: true

A button to open the pop-up (not a Bubble Card one)

type: button
tap_action:
  action: navigate
  navigation_path: '#kitchen'
name: Kitchen
icon: mdi:fridge

This feature allows you to open a pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.

type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Security
icon: mdi:video
trigger_entity: binary_sensor.front_door_motion
trigger_state: 'on'
trigger_close: true

This card is the companion to the pop-up card, allowing you to open the corresponding pop-ups. It also allows you to open any page of your dashboard. In addition, you can add your motion sensors so that the order of the buttons adapts according to the room you just entered. This card is scrollable, remains visible and acts as a footer. This card will have more features in the future.

⚠️ Important: This card have to be the last one in your view (after every cards and pop-ups). It can't be inside any stack.

The variables starting with a number defines your buttons, just change this number to add more buttons (see example below).

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Living room
1_icon: mdi:sofa
1_link: '#living-room'
1_entity: light.living_room
1_pir_sensor: binary_sensor.living_room_motion
2_name: Kitchen
2_icon: mdi:fridge
2_link: '#kitchen'
2_entity: light.kitchen
2_pir_sensor: binary_sensor.kitchen_motion
3_name: Dining room
3_icon: mdi:silverware-fork-knife
3_link: '#dining-room'
3_entity: light.dining_room
3_pir_sensor: binary_sensor.dining_room_motion

This card can be a slider or a button, allowing you to toggle your entities or automations, control the brightness of your lights and the volume of your media players. To access color / control of an entity, simply tap on the icon.

type: custom:bubble-card
card_type: button
button_type: slider
entity: light.kitchen_led
name: Kitchen LED
icon: mdi:led-strip-variant

This is a customizable button (similar to the switch button) that allows you to use all actions directly on the whole button allowing you to use it for almost everything.

This is still experimental and more customizations are coming.

Here is an example of a button that toggle all the lights of a room and if you double tap or hold it, it will open a pop-up with all your other lights:

type: custom:bubble-card
card_type: button
button_type: custom
entity: light.kitchen
name: Kitchen
icon: mdi:fridge
tap_action:
  action: toggle
double_tap_action:
  action: navigate
  navigation_path: '#kitchen'
hold_action:
  action: navigate
  navigation_path: '#kitchen'

This card allows you to control your covers.

type: custom:bubble-card
card_type: cover
entity: cover.kitchen
name: Kitchen
icon_open: mdi:roller-shade
icon_close: mdi:roller-shade-closed

This card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations...

type: custom:bubble-card
card_type: separator
name: Covers
icon: mdi:window-shutter

This card is here to fill an empty column. This is useful if you have an horizontal-stack in your pop-up with only one card. Take a look at the bottom right corner of the second screenshot to (don't) see it.

This card has no options.

type: custom:bubble-card
card_type: empty-column

You can also use HA default tap actions, double tap actions and hold actions on the icons of the buttons, the pop-ups and the covers. This allows you to display the “more info” window by holding the icon and to turn on/off the lamp of a slider by a single tap for example.

This is still experimental and only available in YAML for now.

tap_action: 
  action: toggle 
double_tap_action: 
  action: call-service 
  service: script.dark_scene 
hold_action: 
  action: more-info

Here is the raw code of my "Cuisine" pop-up (Kitchen in english) as seen in some screenshots :

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    entity: light.cuisine
    icon: mdi:fridge-outline
    name: Cuisine
    hash: '#cuisine'
    state: sensor.cuisine_temperature
    width_desktop: 540px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    styles: |
      #root {
        /* This is a fix for older Safari (for my wall mounted iPad) but it won't work on Firefox, this is optional */
        display: grid !important;
      }
  - type: custom:bubble-card
    card_type: separator
    name: Lampes
    icon: mdi:lightbulb
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.led_cuisine
        name: LED
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.bar_cuisine
        name: Bar
        icon: mdi:light-recessed
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.spots_cuisine
        name: Plan de travail
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.hotte_cuisine
        name: Hotte
  - type: custom:bubble-card
    card_type: separator
    name: Appareils
    icon: mdi:connection
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: media_player.google_nest_cuisine
        name: Google Mini
        icon: mdi:speaker
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: fan.hotte_cuisine
        name: Hotte
        icon: mdi:fan
  - type: custom:bubble-card
    card_type: separator
    name: Volets
    icon: mdi:window-shutter
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: cover
        entity: cover.cuisine
        name: Cuisine
        icon_open: mdi:blinds-horizontal
        icon_closed: mdi:blinds-horizontal-closed
      - type: custom:bubble-card
        card_type: empty-column

You can directly use styles: | in YAML without card-mod which allows you to modify the CSS style of the pop-ups and all the other cards.

Please note that you will have to add !important; to some CSS styles that are already defined (see examples below).

Some cards needs a page refresh to display your CSS modifications (like the pop-ups).

Here is how to change the pop-up background (you can do it with bg_color, bg_opacity and bg_blur now).

styles: | 
  #root {
    /* You can edit the last value (0.8) to change the opacity, 0 is transparent and 1 is the max value */
    background-color: rgba(79, 69, 87, 0.8) !important;

    /* Add blur on your background.
    backdrop-filter: blur(10px);
  }
  bubble-card::after {
    /* Hide the gradient in the top of the pop-up */
    display: none !important;
  }

To change the font size of any Bubble Card:

styles: |
  ha-card { 
    font-size: 12px;
  }

To change the background color of a single button in an horizontal-buttons-stack:

styles: >
  /* Selector for the '#kitchen' button */
  .kitchen {
    background: darkblue !important;
  }

To change the background color of a button:

styles: | 
  ha-card > div > div > div { 
    background: blue !important; 
  }

Or the color of a slider:

styles: |
  .range-fill { 
    background: rgba(79, 69, 87, 1) !important; 
  }

The Bubble theme (like on the screenshots) can be found here: https://github.com/Clooos/Bubble

Advanced users can add templates in JS in their custom styles, here is an example of a button that is red when it's off and blue when it's on.

type: custom:bubble-card
card_type: button
entity: switch.test
name: Test
styles: |
  .switch-button {
    background-color: ${state === 'on' ? 'blue' : 'red'} !important;
  }

More information here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator

For now you have access to these variables in some cards (not all):

state will return the state of your defined entity.
entity will return your entity you defined like switch.test in this example.

But in all cards you can also use this:

hass.states['light.kitchen'].state will return the state of light.kitchen.
hass.states['light.kitchen'].attributes.brightness will return the brightness attribute of light.kitchen.

⚠️ For now there are some features that are not working with:

• UI Lovelace Minimalist (see Clooos#41)
• Lovelace state switch (see Clooos#47)
• Kiosk mode, but here is a workaround

Feel free to open an issue if something is not working as expected.

And for your questions you can go ask here on the forum to get some help from me or the community :

If you like my project and want to support me, please consider making a donation. Any amount is welcome and very much appreciated 🍻

Thank you everyone for your support, you all are my greatest motivation!

• Contribution guidelines

Welcome to [Bubble-Card]! We're thrilled that you'd like to contribute. Your help is essential for making it better.

Before you start contributing, please make sure you have read and understood our Code of Conduct.

First, fork the repository to your own GitHub account. This will create a copy of the project under your account.

git clone https://github.com/yourusername/Bubble-Card

cd Bubble-Card

Create a new branch for your feature or bug fix:

 git checkout -b feature-branch

Make your changes and commit them:

git add .
git commit -m "Description of your changes"

Push your changes to your fork:

git push origin feature-branch

Finally Click on Create Pull request to contribute on this repository.