⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

[damiantje99 (Damian_Eickhoff)]

I dont think its a background but a box-shadow. Try setting that to none

[RKCKBN]

Try:

styles: >-

  .bubble-select-card-container {
      
      border: 2px solid purple !important;
      box-sizing: border-box;
    
    }

  .bubble-icon {
     color: purple !important;
    }

  .bubble-dropdown-arrow {
      background: purple !important;
    }

  mwc-list-item  {
    background: purple !important;
  }

  mwc-list-item[selected] {
   background: purple !important;
  }

[ph0tonblast]

Hi and thanks for your reply!
This happened after adding the code:

I tweaked it a little and got:

So this is great already, but is there a way to change the orange border thingy as well?

Thanks!

[RKCKBN]

This should be done by the

.bubble-select-card-container {…}

section…

Edit: just tested the code above in my test area:

[mavanac]

Hi,
How can we reduce gaps between sub-buttons?
Thanks
Mavanac

[ph0tonblast]

Heya,

Thanks again! It must have been a local browser cache issue on my side, my resulting code is:

.bubble-select-card-container {
      border: 2px solid rgba(76,0,153,0.4) !important;
      box-sizing: border-box;
    }

  .bubble-icon {
     color: purple !important;
    }

  .bubble-dropdown-arrow {
      background:  rgba(76,0,153,0.4)  !important;
      color: white !important;
    }

  mwc-list-item[selected] {
   background: rgba(76,0,153,0.8) !important;
   color: white !important;
  }

I did remove the ‘mwc-list-item {}’ portion, and altered some purples to rgba configs. This is awesome. Thanks for your help (everyone)!

[Cloos]

Bubble Card 3

v3.0.0-beta.1

If you missed the previous beta releases, please check this changelog (and previous ones) for all previous new features and changes.

Hi everyone!

I’ve spent the last few weeks working on something that means a lot to me: making sure Bubble Card stays fully configurable right from the editor. This has always been a key goal, and I’m so excited to finally introduce some new tools to keep that possible.

Today marks an exciting new milestone for Bubble Card and for me! This update includes some of the biggest changes ever introduced! A full new version, with a new number, and no more 2.5 betas

Say hello to the Module Store and Module Editor! These new features are designed to make setting everything up a lot easier and more intuitive. With these tools, you’ll be able to find, install, update, customize and create modules directly within the editor, streamlining the entire process!

The community has already shared some modules, and most are fully compatible! Thanks so much to everyone who contributed, this will really helps bring the community closer!

This update also brings one new card to the collection: a full Calendar card! Add to that better pop-up creation, smoother sliders, better editor, and dozens of improvements… and you get one of the biggest updates to Bubble Card so far.

I’m really proud of how far this release has come, and incredibly grateful to all of you for your support

Let’s take a look at the 4 most important new features:

---

The new Module Store is here!

No more manual YAML copy-pasting to add a new module. With the new Module Store, you can browse available modules, install them with a click, and even update them directly. Just like an app store!

Each module shows a short description, a screenshot, and a direct link to the original discussion, so you always know what it does and how it works. It’s a smoother, and way more collaborative way to use modules.

One note: due to a limitation in GitHub’s API, only top-level reactions like on the main discussion post are counted for popularity, along with other factors like recent activity, number of comments, updates… So don’t hesitate to show some love there if you find a module useful!

---

Introducing the Module Editor!

Alongside the Store, Bubble Card now includes a powerful Module Editor that lets you create, edit, or delete your modules, right from the UI.

You can even edit YAML directly, export your module with the full discussion format (ready to share), and manually add custom ones without using a file at all.

All of this comes with a live preview. So if you’re still using “YAML only” mode, maybe it’s time to reconsider.

---

New Calendar card!

@brunosabot (aka the Man) has added a brand new card type to the collection: the Calendar card. It displays your calendar in a clean and minimal format, and its content is scrollable, so you can easily browse upcoming events.

Whether you use it for waste collection, events, or birthdays, it’s super handy!

Merci Bruno again for your huge help on this project! PR #1207

Bruno is also the creator of Streamline Card, a powerful tool to create reusable templates with variables and even JS support. He wrote a great article about his latest setup using both Bubble Card and Streamline Card, definitely worth a read for some inspiration! The Man is definitely good.

---

Pop-up creation made easier

Before, if you wanted to create a pop-up, you had to manually insert a vertical stack first. Now? Bubble Card takes care of it for you.

When you add a new pop-up, the required stack is automatically added, meaning one less step for you. This small change will make a big difference, especially for new users!

---

Other new features and enhancements

• New optimized way to handle modules:
  This new installation method is not for “YAML only” users. If you are using the Bubble Card editor, the previous bubble-modules.yaml file is not needed anymore and has been renamed bubble-modules-example.yaml. All the new steps to follow are explained in the module section of the editor.

• New accent color:
  The default accent color has been updated to a more accessible blue that improves contrast (a lot) with most themes, especially the default HA theme. (To revert to the previous color, add this to your theme: bubble-default-color: var(--accent-color))

• New default hold and double-tap action:
  Hold and double-tap actions now defaults to none on most cards. PR #1393 by @AlexDaniel

• You can now create custom sliders without YAML:
  Custom sliders within a range (based on a sensor entity) can now be created in the editor directly.

• New visual feedback for icon taps:
  Main icons now visually respond to tap/click interactions for a better user experience.

• Improved editor:
  New styling and descriptions, with faster response.

---

Bug fixes and optimizations

• Haptic feedback:
  Fixed missing haptic feedback in previous betas. #1354 #1364 #1372

• Fixed click propagation:
  Prevents unwanted click events from bubbling. PR #1396 by @AlexDaniel

• Fixed ability to use forecast attributes like forecast[0]?.temperature in HA 2025.4:
  Ensures compatibility with new Home Assistant versions. #1369

• Fixed layout issue causing old custom styles to break:
  Cards using grid_layout now have their row set to auto by default, restoring compatibility.

• Fixed slider issues:
  Sliders are now more responsive and their steps behave correctly on release. And more fixes… #1399

• Fixed “idle” state handling:
  The idle state is no longer interpreted as “on”. #1388

• “Custom element doesn’t exist” error:
  Attempt for a better fallback mechanisms to reduce this random issue after an update. #1340 #1351

• Fixed sluggish buttons when double-tap is disabled:
  Actions are now faster! PR #1392 by @AlexDaniel

• Fixed play/pause visibility in media player:
  The play/pause button is now correctly hidden when needed. #1363

• Fixed pop-up “background update” feature:
  Map cards now display the correct zoom level inside pop-ups when this setting is enabled. #1334

• Fixed Cannot read properties of null (reading 'shadowRoot') error

• Better handling of history with pop-ups.

---

Thanks again to everyone who reports bugs, shares feedback, or just uses Bubble Card.

This project has grown beyond anything I expected, and I’m really proud to share this next step with you all.

The final changelog is going to be huge!

And have fun testing!

Clooos

---

How to test this beta?

Go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select “Redownload”. You’ll be able to choose the beta version under “Need a different version?”. You can then change back to your previous version if needed.

---

Bubble Card news

---

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles, templates and modules, since I’ve noticed more and more questions on these topics.

---

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced custom styles, templates and modules. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles, templates and modules!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Thank you so much for being part of this amazing community, your support will always makes a huge difference!

---

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

---

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Release Bubble Card 3.0.0-beta.1 · Clooos/Bubble-Card

[edcoppen]

Hey Clooos, looking forward to trying this. Thank you
Looking at the versions, they jump from 2.5 beta 9 to 3.0 beta 1. Is there a stable version along the way please?

[Cloos]

No, I skipped v2.5, there was too many changes and new features, and for me the modules were not ready for production without the store and the module editor. This was definitely not a v2.5 anymore

[edcoppen]

Ok, great. I’ll look forward to a stable release in the future. I appreciate you’ve made a lot of progress in the meantime. Thank you

[Cloos]

Bubble Card 3

v3.0.0-beta.2

If you missed the previous beta releases, please check this changelog (and previous ones) for all previous new features and changes.

Hi everyone!

Just a quick update to fix the recent pop-up issues (#1420).

I also improved the experience when opening the Modules section for the first time, especially if the template sensor hasn’t been configured yet.

The editor should feel a lot faster now!

Thanks so much to everyone for the quick feedback!

Edit: There is a typo in the template sensor for the Module Store and Module Editor. It’s trigger:and not triggers:.

Here’s the correct one:

# Storage for Bubble Card Modules
template:
  - trigger:
      - trigger: event
        event_type: bubble_card_update_modules
    sensor:
      - name: "Bubble Card Modules"
        state: "saved"
        icon: "mdi:puzzle"
        attributes:
          modules: "{{ trigger.event.data.modules }}"
          last_updated: "{{ trigger.event.data.last_updated }}"

Release Bubble Card v3.0.0-beta.2 · Clooos/Bubble-Card

[Cloos]

Bubble Card 3

v3.0.0-beta.3

If you missed the previous beta releases, please check this changelog (and previous ones) for all previous new features and changes.

Hi everyone!

A new beta is out! It should fix all recently reported issues, like pop-ups on iOS and card type selection in the editor. Thanks a lot for all your reports and feedback, it really helps!

Fingers crossed!

Bug fixes and optimizations

• Card type selection broken:
  Fixed card type picker not working in the editor. #1416

• Pop-up issues on iOS:
  Fixed close buttons not working correctly on iOS. #1420

• More pop-up fixes:
  They should works perfectly now!

• Horizontal buttons not opening pages:
  Fixed horizontal button stack not working in v3.0.0-beta.2. #1424

• Invalid config for template:
  There was a typo in the template sensor since beta.2, that’s trigger: and not triggers:! #1423

---

How to test this beta?

Go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select “Redownload”. You’ll be able to choose the beta version under “Need a different version?”. You can then change back to your previous version if needed.

Release Bubble Card v3.0.0-beta.3 · Clooos/Bubble-Card

[stefan1982 (Stefan)]

@Cloos : After the update to 3.0 beta 3, I’ll get “Custom cement doesn’t exist: bubble-card” for every bubble-card on my dashboard (again).
This keeps getting back…

[Cloos]

Hi! This is a common issue after some HACS updates.

Check this to fix it:

Newest two prereleases do not work

[stefan1982 (Stefan)]

@cloos:
For the first solution:
I tried deleting BC => restarting => removing the bubble-card.js from dashboard resources => restarting again, and then re-installing BC 3.0b3 again, which results in 2.4 again. So to me, that solution doesn’t work unfortunately.

For the second solution:
How should I find out what the correct hacsfile?=-checksum md5-part should look like for the latest Bubble-card 3.b3 and change that in the dashboard resources tab?

[Cloos]

Just use the same number + 1, then refresh the page.

[amstermk]

I‘m on the latest Beta and noticed that the accent-color has changed from orange to blue. Now I wanted to revert it back to orange (did so by implementing the code in the themes.yaml) and it only works partially…

Especially for the select-card the border and the arrow-background still stay blue and will not revert back to orange. The selected item in the list though is orange… so question is:

How do I change the border-color and the arrow-background color in the latest Beta?

[D-Vine (tom)]

I have the same problem.
Delete, reboot install fresh no luck.

Having a hard time where to look and solve this.

Where and how to change the hacsfile number?

[Cloos]

This is an error on my side, but I already fixed it.

Just wait for the next beta now

[Cloos]

Check this comment, just add + 1 to the last number, then refresh the page.