I want a bubble card to control my well pump. Easy task but at the same time i want the card to show a slider with the amount of water in the tank in the same card as a background. Can this be achieved?
This release is the first v3.0.0 stable candidate (so not officially the final, but closer than ever), here’s the changelog for those who are updating from v3.0.0-beta.9:
Fixed “Hold + Navigate” only working once:
Hold actions combined with navigation now work reliably every time. #1582
Re-added the ability to edit cover button icons using custom templates:
You can now fully customize cover icons again, just like before v3.0.0-beta.
Fixed select_attribute dropdown appearing inside the card:
Dropdowns now display correctly outside of the card area. #1559
Fixed module position changing after editing:
Edited modules will now stay in place instead of jumping to another position.
Fixed invalid (and extremely long) YAML when exporting a module:
YAML exports are now clean, valid, and usable in all cases.
Dropdowns in pop-ups now overflow correctly if the pop-up is not scrollable:
This is a first step, I’m planning to improve that more in a future release. #1166
Faster and smoother pop-ups (again!):
Additional performance tweaks make pop-ups even more responsive.
Fixed slow pop-up closing and unresponsive buttons:
Closing pop-ups and button taps now react instantly (for real this time!).
Fixed “Close the pop-up after any click or tap” not working on buttons:
This feature now works properly across all elements, including buttons.
Fixed module disappearing after YAML import then edit:
Modules now remain visible and editable in all cases. #1549
Faster initialization of all cards in some setups:
Startup times are reduced, especially on large dashboards.
Added support for hiding sub-buttons when entity is unavailable (hide_when_parent_unavailable: true):
Sub-buttons can now follow entity availability rules.
Removed gzip archives from the project:
No more unnecessary compressed files. Fix attempt for #1558.
Some minor improvements:
Small tweaks and fixes here and there for overall stability and polish.
And here it is, the full v3.0.0 release note! This one literally took me hours to write, and I really hope everything is clear!
Any feedback on this release note is more than welcome as well!
Hi everyone!
Today marks an exciting new milestone for Bubble Card and for me! This update includes some of the biggest new features ever introduced, but more importantly the long-awaited Modules
Modules are allowing you to finally manage custom styles and templates globally! But this new feature is so much more powerful than that, it lets you add actual features yourself in the Bubble Card editor, using all the default Home Assistant form options!
I won’t go into too much detail here, there’s a lot to cover, and this version comes with a never-ending list of new features, bug fixes and optimizations!
Alongside the Store, I wanted to push these new Modules even further, so now 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! So there’s no need to know CSS or JS to customize your cards anymore!
Some community Modules are already available, and I want to give a huge thank you to everyone who contributed so far! This is a big step forward for making Bubble Card even more collaborative and flexible!
On my side, I’ve added 5 Modules, and you can for example find this one, it was highly requested and applies Home Assistant’s default styling to Bubble Card!
In previous releases, accidentally touching a slider could lead to a very bad experience, like turning on a light by mistake or even pushing the music volume to the max… not great.
That’s why you now need to hold the slider before you can change its value. This change also made it possible to support tap and double-tap actions on these cards! I’ve also finally added the ability to configure min, max and step values, you can even create read only sliders to show a battery percentage, current power production…
@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!
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.
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. You can even have an example configuration generated with some entities already included in the pop-up.
This small change will make a big difference, especially for new users!
You now have the ability to change the number of rows in a section view! The sub-buttons will also reorganize to make use of the newly available space (by enabling the layout shown in this screenshot)! This is still just the first step, we plan to make even more use of that space in future releases! Thank you so much to @MrBearPresident for his work on that!
A Stronger Foundation
This release also brings major structural changes across the board:
All cards now follow the same internal layout
CSS and element classes are unified
The codebase has been refactored to be more modular and easier to maintain
And performance is dramatically improved (especially in the editor and pop-ups)
These changes were long overdue and will prevent future breaking issues, especially for custom modules and styles.
They might still affect some of your current customizations, especially for those of you who created advanced styles or tweaked the cover card, but overall, this cleanup makes Bubble Card more reliable and consistent for the future!
Thank You
I’m incredibly proud of this v3.0.0. These past five months, I’ve poured all the time I could into making this update happen, not just because it was deeply rewarding to build, but because I truly believe it will push the project forward in the best way possible!
Thanks again to all the testers and to everyone who’s been part of this journey, and incredibly grateful to those donating or supporting my work on Patreon.
Your support truly makes all of this possible!
And here’s all the other new features, bug fixes and optimizations… again this release note is way too long…
New features and enhancements
CHANGE: Better slider button:
You now need to hold it to be able to change its value. #1014#1045
CHANGE: New normal layout for the cover card:
For better consistency with other cards.
CHANGE: The large layout is now the default in a section view:
For section view users, all current and new cards are now defaulted to the large layout. I advise you to keep it this way, this improve usability a lot on mobile devices.
CHANGE: 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-accent-color: var(--accent-color), or download this Module from the Module Store.
CHANGE: New default hold and double-tap action:
Hold and double-tap actions now defaults to none on most cards. PR #1393 by @AlexDaniel
CHANGE: Improved light slider behavior:
Hold-to-slide sliders (new default) now stop at 1% by default, matching Home Assistant’s slider behavior.
To restore the old behavior, I’ve added an option in the editor in the “Slider settings”. In YAML you can set allow_light_slider_to_0: true. #1295
New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Global modules support:
You can enable a styling module for all cards directly from the editor using the “All cards” button. This is not available for modules with an editor, as those require a specific configuration to work. For YAML only users, just add is_global: true to a module in your bubble-modules.yaml. You can still exclude it from specific cards by disabling the “This card” button, or with the "!module-id" syntax in YAML. A huge improvement to reusability!
New calendar card:
More info above. PR #1207 by @brunosabot
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant’s default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New card layout for sub-buttons in multi-row cards:
A new card layout has been added: “Large with sub-buttons in a grid (Layout: min. 2 rows)”. This layout allow sub-button reordering in cards with at least two rows. In YAML: card_layout: large-sub-buttons-grid. More info above.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.
Section view enhancements:
Added the ability to change the number of rows in a section view. See details above. PR #1172 by @MrBearPresident, thank you again!
.is-on and .is-off classes:
Most cards now automatically receive .is-on and .is-off classes for easier custom styling.
Min/max/step values for sliders:
YAML: min_value:, max_value: and step:. #304#903
Min/max values for media player volume sliders:
YAML: min_volume: and max_volume:. #1269
Min/max/step values for the climate card:
YAML: min_temp, max_temp: and step:.
Support for almost all entities in sliders:
Native support for battery sensors.
All entities with numerical states can now be displayed within a defined range. Toggle “Disable entity filter (for custom slider)”, select your entity, then set min_value: and max_value:. This is perfect to display your current power production for example.
“Tap action on card” added to most cards:
Added to sliders, climate, media player, and cover cards.
Improved usability and accessibility:
Larger touch areas for feature buttons.
Mute icon now visually changes based on volume status in the media player card.
Better default separator line color:
Improves contrast on various backgrounds.
Brightness transition in light sliders:
YAML: light_transition: true and light_transition_time: 500 (default). PR #1301 by @hamayelq.
Min/max temp limits with haptic and visual feedback:
This one looks fantastic! PR #1306 by @hamayelq.
subButtonState variable for custom templates:
For example, you can now finally add subButtonState[0] === 'on' in your templates! PR #1280 by @gregoriohc.
Show last updated time for entities:
YAML: show_last_updated: true. PR #1289 by @StaleLoafOfBread.
Consistent visual feedback across all interactive elements:
All clickable elements now include the default Home Assistant feedback (ha-ripple) for better and more consistent hover/click animations, no more guessing if a tap worked!
Adjust card height (rows) in all views:
This feature was previously removed, but it’s now back and improved! You can now change the number of rows for any card using a large layout, in any view type, including inside pop-ups! More info above. #1441
Pop-up creation improvement:
You can now create pop-ups in only one step, just like other cards. More info above.
Pop-up editor improvement:
You can now scroll inside the preview when editing long pop-ups.
Bug fixes and optimizations
Fixed compatibility with Home Assistant 2025.5:
Select card and select sub-button issues resolved. #1466#1457
Module editor now works correctly. #1459
“Tap action on card” in the editor is functional again. #1472
Improved editor:
New styling and descriptions, with much faster response (10 to 20 times faster!). #698
Editor info texts:
Some info texts in the editor were improved to make things clearer.
Spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for better color contrasts. #1214
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibility for Safari on iOS and macOS.
Fixed a memory leak in text scrolling effect:
Boosting overall performance over time.
Refactored and improved the custom styles/templates system:
For better overall performance.
Editor code quality improvement:
Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!
Custom templates with errors no longer break the card or the entire view
Finally!
Instant initialization of custom styles, templates, and modules:
Custom styles, templates, and modules now load instantly when the page is rendered.
Fixed the horizontal button stack gap:
The visual gap between horizontal button stacks and the card above is now bigger in section views.
Refactored a lot of code for better and faster maintenance:
Large parts of the codebase were cleaned and reorganized to simplify future updates, optimize everything, and reduce bugs.
Optimized memory usage for stable performance over time:
Memory consumption is now better handled to avoid slowdowns during long sessions.
Improved pop-up performance across all devices and browsers:
Pop-ups now open faster and behave more smoothly, especially on older devices. #1211
Improved overall performance on all devices:
General performance has been enhanced across the board, with quicker interactions and reduced latency. #1236
No need to refresh the page after editing pop-ups anymore (finally!):
Pop-up changes are now applied instantly in all cases, no more manual reloads needed.
Unified classes, CSS, elements, and structure across all cards:
All cards now follow the same internal structure, making customizations and maintenance easier.
Fixed various issues with sub-buttons:
Sub-buttons now behave more consistently.
Fixed volume slider issue in media player:
The slider now works as expected when adjusting volume on iOS devices, and probably other devices/browsers. #1196
Fixed missing “curtain” icon:
The curtain icon is now correctly displayed when used in your configuration.
Fixed weather temperature being hidden when 0:
Zero degrees is now correctly shown on weather cards instead of being hidden. #1213
Fixed actions being triggered after dragging over an element:
Tap and hold actions are no longer triggered by mistake after dragging. #839
Module styles priority:
Styles written in the card now take precedence over module styles. PR #1290 by @StaleLoafOfBread
The +/- buttons in the climate card now respect min/max values:
Temperature controls will no longer go beyond the configured minimum or maximum limits.
Added missing supported entities in the slider editor:
All supported entity types are now correctly listed when configuring sliders in the editor. #1221
Added missing vibration feedback:
Now applied to all elements where it was missing, like the main icon. #1354
Fixed sub-button alignment in media player cards:
Sub-buttons are now correctly aligned when all media player buttons are hidden. #1347
Fixed dropdown z-index issue:
The dropdown is now always in front of other elements. #1344#1349
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 and higher:
Ensures compatibility with new Home Assistant versions. #1369
Fixed “idle” state handling:
The idle state is no longer interpreted as “on”. #1388
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:
This rare error no longer occurs when opening certain cards or pop-ups in specific setups.
Better handling of history with pop-ups:
Pop-ups now integrate more smoothly with browser navigation and the history stack.
Card type selection broken:
Fixed card type picker not working in the editor. #1416
Constant speed for text scrolling effect:
Scrolling text now moves at a constant speed, no matter the text length. #1186
iOS tap action fix:
Fixed an issue where tap actions could become unreliable on iOS devices. #1439
Fixed removeChild error:
Resolved a rare Failed to execute 'removeChild' on 'Node' error.
Relative time formatting now matches Home Assistant’s format:
Timestamps like “3 hours ago” are now properly rounded. #1228
All buttons are now hidden when an entity is unavailable:
For example, media player or cover controls will fully hide when the entity is unavailable. #1453
Pop-ups were auto-scrolling to the top:
Opening a pop-up no longer forces the view to jump to the top. #1495
Unwanted scroll behavior in large-2-row layout:
Some cards were scrollable when they shouldn’t be, especially with dropdown sub-buttons. This is now fixed! #1513
Pop-up backdrop color customization works correctly again:
Customizing the backdrop color with --bubble-backdrop-background-color has been fixed. #1294
Backdrop customization from custom styles:
This was just working from a theme file, but you can now individually change the backdrop of a pop-up in the custom styles. You can do that by adding:
CSS using universal selectors was leaking outside pop-ups
Custom styles in a pop-up using * { … } were unintentionally affecting other elements, this will not happen anymore! Sorry, this was not a feature
Various style tweaks and minor UI fixes
Several small inconsistencies and polish improvements across different cards and views. Especially in the select card.
And more…
This update brings Bubble Card closer to being the ultimate dashboard customization tool! As always, I’d love to hear your feedback, so don’t hesitate to share your thoughts and suggestions!
Thanks again for being part of this awesome community!
How to test this pre-release?
The easiest way is to click on the button below, or 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 and templates, 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 modules, custom styles, and templates. 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 modules, custom styles and templates!
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:
Hi! I haven’t changed anything in the horizontal buttons stack and no change on my side, so this is weird
Can you check in the editor, at the bottom you will see the Bubble Card version, is this the correct one? Because some HACS updates are not correctly downloading the correct version.
Hi,
is there a way to force that the subbottons are in 2 Lines?
All my subbuttons are in one line but they should be in split in 2 Lines.
(The last 3 Icons are Subbuttons )
Unexpected behavior with a button which is tied to a binary sensor and showing attributes.
Checking in with the community to see if I set this up incorrectly or if it is a bug I should post to GitHub
Code # 1 below
(1) The attribute mapped in does not appear to refresh, the change is however reflected in the Chip which reads the same thing
(2) the tap action on button does not seem to be updating the YAML - I have ti set to nothing and it still tries to make the call to the entity which doesn’t support the call
Code #2 below
(3) when I tried showing an attribute without the “Custom Styles / Templates”, the not all attributes show properly. For this entity zone count is a number which shows, enabled is a true/false which shows up blank.
Using version 2.4.0 which appears to be the latest.
Hi everyone!
I’m customizing a bubble-card for a cover entity (cover.toldo), and I want to display a horizontal progress bar across the entire button — representing the current_position of the cover (0–100%) — but without enabling the actual slider interaction.
Visually, I want it to look like the “slider” style of bubble-card, but still use the button type for better control and layout.
Here’s what I’m trying to achieve:
Button layout (not slider)
A horizontal progress bar filling the button background depending on current_position
No drag or touch interaction — purely visual
How can I create a linear horizontal progress fill using CSS or templates within the bubble-card?
Has anyone done something similar?
Thank You
New features and enhancements
Bug fixes and optimizations
Bubble Card news
