Welcome to UI eXtension Guides

Tile card features have a height which is a CSS var --feature-height. This is set on the feature element itself, hui-card-feature, which is in shadow root of hui-card-features. Below is a step by step guide on using uix_style_path() to discover yaml selector to cross the shadow root for styling with UIX. Step 1: find feature needing styling Us... Read More

When using UI eXtension themes, often you can carry out all your styling by simple CSS targeting on the hosts class type. For example, see Styling Home Assistant 2026.3 energy now badges which uses a CSS target of :host(.type-power-total). However this will not work if you need to target an element directly in shadow root to target a property th... Read More

Since Home Assistant 2026.3.0, more-info dialog uses an adaptive dialog (ha-adaptive-dialog), which includes either a standard dialog (ha-dialog) on larger screens or a bottom sheet (ha-bottom-sheet) on smaller screens. This guide shows how to target each type of dialog in order to hide the header. In both cases, the parent dialog element is ha... Read More

Host/element path selector Applying this guide requires the & Host/element path selector When viewing media in the Home Assistant Media panel, the dialog used is large in size. This guide shows how to make the dialog fullscreen, without title so you can focus on the media itself. Videos will fit by default and img ... Read More

Host/element selector To save using a template just for type you can use the alternate method using Host/element selector When using UI eXtension themes, often you can carry out all your styling by simple CSS targeting on the hosts class type. For example, see Styling Home Assistant 2026.3 energy now badges which uses ... Read More

Home Assistant 2026.3 introduces 3 new energy badge types used in the built-in energy dashboard. These are power-total, gas-total and water-total. To style these on the built-in energy dashboard you need to use a UIX theme. Home Assistant badges use ha-badge in shadow root. ha-badge uses many styling vars so most styling can be done on :host. S... Read More

UI eXtension (UIX) templates are confined to a set of style rules, either the default style (string or .: key) or child style. There is no concept of variable sharing across templates, and it would be too inefficient for this to be coded into UIX with lots of tracking and regeneration of template to the backend when variables change. Consider t... Read More

A common request is to adapt the tooltips in entities rows. In fact, a browser will show a tooltip any element with a title attribute. This guide will show how to adapt the tooltip for an entities row, and then apply the same technique to add a tool tip to a card. Any element with title attribute will make the browser show a tooltip. UIX can’t ... Read More

Home Assistant uses a dialog manager through which most dialogs are shown. UIX patches through the showDialog() method to allow styling dialogs via UIX theme. Other dialog guides You can check out all dialog guides via the dialog category. As there are many different types of dialogs, UIX guides will not be able to cov... Read More

Contribution to UI eXtension guides is most welcome. To view your edits locally you will need ruby as the site is built with Jekyll. If you don’t have ruby then don’t let that stop you from contributing. Simply follow the guide writing your post in markdown and any suggested edits will be made when you submit your pull request. Creating a post ... Read More

Starting with UIX version 5.1.0, you can now apply --uix-icon to icons that do not have a parent of ha-icon. These are often icons which have a set purpose in the Home Assistant interface and are not able to be changed, unless you have UIX. Generally modifying such icons is accomplished using UIX in your themes. The example below changes the s... Read More

Home Assistant 2026.3 changes ha-icon-button from using mdc button to webawesome (ha-button). This means that all uses of --mdc-icon-button-size need to change to --ha-icon-button-size. The example below changes the default size of the picture-glance entity button icon from 40px to 70px. The icon color is changed to yellow for example effect on... Read More

There are major changes to dialogs in Home Assistant 2026.3. Changes include: ha-dialog is now a new element that uses the Web Awesome wa-dialog component rather than the MDC dialog. The final element used is the browser’s <dialog> element, which is displayed in the browser’s top layer. the interim ha-wa-dialog is now ha-dialog as pe... Read More