Welcome to UI eXtension Guides

Home Assistant’s calendar page is a natural place to create an event, but the action can be useful wherever the context happens: a dashboard, a room view, or a button UIX Broker has added to an existing page. This UIX Broker interaction opens Home Assistant’s own Create Event dialog in response to a custom action. Home Assistant 2026.10.0 ... Read More

Home Assistant 2026.10.0 adds theme tokens for the vector map. They let a theme recolor the map independently of the dashboard’s light or dark mode—useful when, for example, a light theme needs the higher contrast of a dark map. The tokens are based on the map-style feature. The palettes below correspond to the bundled default, colorful, natura... Read More

With the archiving of the Home Assistant Community Add-on: Log Viewer, Home Assistant may wish for a similar log viewing experience in a single focussed page using as much viewing space as possible for raw logs. This collection of UIX Broker interactions allows for just that by i. setting the System → Logs to open in a new page, ii. adding a but... Read More

Elements used: UIX Forge more-info spark more-info UIX action A vertical-stack is used with a heading card containing badges that use UIX actions to show specific more-info pages - history, settings and related. The example YAML is for a grid section in a Sections dashboard. type: grid cards: - type: vertical-stack cards: -... Read More

Home Assistant Frontend 2026.5 brought in a new adaptive popover dialog. It is like standard dialogs but on desktop shows a smaller dialog in place targeted to the element using the dialog, and on mobile uses a bottom sheet. The date picker dialog now uses adaptive popover dialog. UI eXtension can style the adaptive popover using uix-dialog-yam... Read More

Starting in Home Assistant 2026.8, Developer Tools will be renamed to Tools. This change will impact UIX Styling using the theme item uix-developer-tools(-yaml). As the current Developer Tools panel (ha-panel-developer-tools) and new Tools panel (ha-panel-tools) are both config panels (ha-panel-config), which can be styled in theme with uix-con... Read More

UIX Forge allows you to forge an element and apply various features with forge sparks. This guide uses the attribute spark and the tooltip spark to add rich, customizable tooltips to Home Assistant cards and elements. Forge elements All UIX Forge documentation will describe the card, row, badge, section, picture-element as ele... Read More

UIX Forge allows you to forge an element and apply various features with forge sparks. This guide uses UIX Forge to forge a tile element with inline feature which can be changed using the event spark and button spark. Forge elements All UIX Forge documentation will describe the card, row, badge, section, picture-element as ele... Read More

When developing or troubleshooting UIX dialog styles it is useful to be able to trigger dialogs on demand without navigating to the relevant part of the UI. This guide provides a centralized, linkable reference of browser console snippets that let you do exactly that. Open the browser developer tools with F12 (or Cmd ⌥ I on macOS) and paste any... Read More

UIX Forge allows you to forge an element and apply various features with forge sparks. This guide uses UIX Forge to forge a picture view element which can be changed from section header badge buttons using the event spark. Forge elements All UIX Forge documentation will describe the card, row, badge, section, picture-element a... Read More

Tile card features have a height which is a CSS var --feature-height. This is set on the feature element itself, hui-card-feature, in the shadow root of hui-card-features. Below is a step by step guide on using uix_style_path() to discover a YAML selector to cross the shadow root for styling with UIX. Step 1: find feature needing styling Use y... 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

Deprecated guide This guide is deprecated. UIX Forge now provides the attribute spark and tooltip spark which offer a much richer tooltip experience with placement control, delay, CSS styling, and more. See the updated guide: Using UIX Forge tooltip and attribute sparks for tooltips. A common request is to adapt the to... 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