UI eXtension Guides

Using UIX Forge tooltip and attribute sparks for tooltips

2026-04-12T00:00:00+00:00

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 element as indeed, a forged element is not restricted to being a card, but can be any type supported by UIX Forge mold type

The attribute spark lets you set or remove HTML attributes on elements inside a forged element’s shadow DOM. The tooltip spark adds a fully featured tooltip — with placement, delay, skidding, and CSS control — powered by UIX Forge.

Scenario 1: Adjust a title attribute with the attribute spark

A browser will display a native tooltip for any element that has a title attribute. The attribute spark can target an element by CSS selector and change its title attribute to any value you choose.

In the example below a tile card is forged and the attribute spark adds a title attribute whose value is a Jinja template. The template uses relative_time to show how long ago the entity last changed, producing a browser native tooltip that updates each time the card renders.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: attribute
      attribute: title
      action: add
      value: |
        {{ relative_time(states[config.element.entity].last_changed) }} ago
element:
  type: tile
  entity: light.bed_light

Home Assistant output — adjusted title tooltip

Native browser tooltips have limited styling and behaviour options. A better approach is to use the attribute spark to remove the existing title attribute first, then add the tooltip spark to provide a fully featured replacement.

In this example a weather forecast card is forged. The attribute spark removes the native title from the location name element, and the tooltip spark adds a wind speed tooltip to the temperature/attribute area using Jinja templates to pull live state attributes.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: attribute
      for: "hui-weather-forecast-card $ div.name"
      attribute: title
      action: remove
    - type: tooltip
      for: "hui-weather-forecast-card $ div.temp-attribute"
      content: "Wind: {{ state_attr(config.element.entity, 'wind_speed') }} {{ state_attr(config.element.entity, 'wind_speed_unit') }} ({{ state_attr(config.element.entity, 'wind_bearing') }})"
element:
  show_current: true
  show_forecast: false
  type: weather-forecast
  entity: weather.carlingford
  forecast_type: daily

Home Assistant output — tooltip spark replacing native title

Removing the title attribute first

Always remove the native title attribute before adding the tooltip spark to avoid both appearing at the same time.

The tooltip spark provides show_delay and hide_delay options (in milliseconds) to control how quickly the tooltip appears and disappears. This is useful when tooltips should only show after intentional hover, or should linger longer after the cursor leaves.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      content: "I appear after a short pause and stay a little longer"
      show_delay: 600
      hide_delay: 300
element:
  type: tile
  entity: sun.sun

Home Assistant output — tooltip with custom show and hide delays

Delay tips

A show_delay of 400–600 ms is a good starting point for cards where you want to avoid the tooltip flashing during normal interaction. Use a small hide_delay (100–200 ms) to let the cursor move away without the tooltip feeling sticky.

Scenario 4: Rich CSS styles, placement, and skidding

The tooltip spark also supports placement control and positional fine-tuning with placement, skidding, and distance options. These allow you to position the tooltip relative to the element and nudge it along or away from the element. Custom CSS can be applied with UIX Styling on the forge to create rich visual tooltip designs.

The supported placements are top, bottom, left, and right (with optional -start and -end variants such as top-start or bottom-end).

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      content: "Rich styled tooltip — bottom right"
      placement: bottom-end
      skidding: 50
      distance: 8
      show_delay: 400
      hide_delay: 150
  uix:
    style: |
      :host {
        --uix-tooltip-background-color: #4a4aff;
        --uix-tooltip-content-color: #e0e0ff;
        --uix-tooltip-border-width: 1px;
        --uix-tooltip-border-style: solid;
        --uix-tooltip-border-color: #4a4aff;
        --uix-tooltip-border-radius: 8px;
        --uix-tooltip-padding: 0.85em;
        --uix-tooltip-box-shadow: 0 4px 16px rgba(74, 74, 255, 0.4);
      }
element:
  type: tile
  entity: sun.sun

Home Assistant output — richly styled tooltip with custom placement

Placement and skidding

skidding shifts the tooltip along the axis of the placement edge (e.g. left/right for top or bottom placements). distance controls how far away from the element the tooltip appears. Both accept positive and negative values.

Testing dialogs in the browser console

2026-04-11T00:00:00+00:00

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 of the snippets below into the Console tab.

Trigger a UIX update notification

The following dispatches a persistent hass-notification event on the root element, simulating the banner that appears when UIX has been updated.

document.querySelector("home-assistant").dispatchEvent(new CustomEvent("hass-notification", { detail: { message: "UIX has been updated", duration: -1, dismissable: true }, bubbles: true, composed: true }));

duration: -1 keeps the notification visible until it is manually dismissed. Change the message value to test other notification texts.

Trigger an alert dialog

window.cardHelpers exposes the same dialog helpers that Home Assistant cards use internally. The following opens an alert dialog:

window.cardHelpers.showAlertDialog(document.querySelector("home-assistant"), { title: "Restart Home Assistant?", text: "Some text" });

Replace title and text with the values you want to test. The dialog type class reported in the DOM will be type-dialog-box, which you can use to scope CSS in your UIX theme.

Finding the dialog type class

With the dialog open, open the Elements panel in developer tools and inspect the last child of the shadow root. The outer element is the dialog parent (e.g. ). Its type class (e.g. type-dialog-box) can be used to scope your UIX theme CSS.

Trigger a confirmation dialog

A confirmation dialog (with Cancel and Confirm buttons) can be opened with showConfirmationDialog:

window.cardHelpers.showConfirmationDialog(document.querySelector("home-assistant"), { title: "Restart?", text: "Are you sure you want to restart Home Assistant?", confirmText: "Restart", dismissText: "Cancel" });

Inspect UIX variables on a dialog element

Once a dialog is open and visible in the Elements panel, select the inner dialog element (e.g. ha-dialog) and run the following in the Console to see all UIX variables including params:

$0._uix[0].variables

$0 refers to the currently selected element in the Elements panel. The params object contains the values passed to the dialog, such as title and text, which you can use in UIX Jinja2 templates to target a specific dialog.

Styling the dialogs you are testing

For a complete guide on how to style dialogs using UIX themes — including template examples and shadow DOM targeting — see Styling dialogs with UI eXtension.

Using UIX Forge event and button sparks to change inline tile card feature

2026-04-11T00:00:00+00:00

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

Template macros

This guide relies heavily on template macros. To first understand the macros and their output, a markdown card will be used as the forged element. This is a good way to check your macros are working as expected before proceeding to use in any final solution.

Four macros are used in the final solution. They are:

feature_options(): Returns an array of lookup dicts to provide an icon and a feature. Uses returns: true returns method as the macro returns an array.
feature_max_index(): Returns the length of the array returned by feature_options() minus 1 to give a zero-based index. Also uses the returns method as the macro returns an integer.
feature_next_index(index): Returns the next zero-based index available in the array, rolling over back to start of the array. Takes a param of index and uses returns method as the macro returns an integer.
feature_item(index, key): Returns the item by key of the dict at the index in the feature_options() array. It takes params of index and key.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {%- do returns(options) -%}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
element:
  type: markdown
  content: |
    **feature_options()**: {{ feature_options() }}

    **feature_max_index()**: {{ feature_max_index() }}

    **feature_next_index(0)**: {{ feature_next_index(0) }}
    **feature_next_index(1)**: {{ feature_next_index(1) }}

    **feature_item(0, 'icon')**: {{ feature_item(0, 'icon') }}
    **feature_item(0, 'feature')**: {{ feature_item(0, 'feature') }}

    **feature_item(1, 'icon')**: {{ feature_item(1, 'icon') }}
    **feature_item(1, 'feature')**: {{ feature_item(1, 'feature') }}

Macro testing output

Switch to tile element

Now the macros are well defined and ready to be used we can start building the forged tile element. Here a static index is used for feature_item(). This will change once the event spark is added.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
element:
  type: tile
  entity: light.bed_light
  features:
    - type: "{{ feature_item(0, 'feature') }}"
  features_position: inline

Forged tile cards

Output with two copies of the forge code, one as per above, and one changing the index from 0 to 1

Add event spark

Next we will use the event spark for the forged element to be able to use data received from fire-dom-event.

The event spark needs a forge_id. Here the ID used is made up of a prefix and the entity from the element config.

In the forged element we now use data from the event spark as input to feature_item(). As per event spark guidelines, our event data will not be available when first loaded, so default(0) is used. The data will also come as a string so we cast to int.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
element:
  type: tile
  entity: light.bed_light
  features:
    - type: "{{ feature_item(uixForge.event.index | default(0) | int, 'feature') }}"
  features_position: inline

Use buttons to test

First up, we will use two standard buttons to test the solution so far. We need to send 0 and 1 as index to the forge_id light_tile_light.bed_light with uix_forge fire-dom-event.

Two buttons will be used using the YAML below.

show_name: true
show_icon: false
type: button
name: Feature Index 0
grid_options:
  columns: 6
  rows: 1
tap_action:
  action: fire-dom-event
  uix_forge:
    - forge_id: light_tile_light.bed_light
      data:
        index: 0 # one button with 0, one button with 1

Using buttons to send spark event data

Full solution

Now that testing with external buttons show that the event spark is working, we can now use a button spark to add a button adjacent to the inline feature to change the inline feature.

The button spark has the following specific config:

after: is set to hui-tile-card $ hui-card-features.
icon: is set to {{ feature_item(feature_next_index(uixForge.event.index | default(0) | int), 'icon') }}
forge_id: of the fire-dom-event for uix_forge is set to light_tile_{{config.element.entity}} to match the event spark’s forge_id.

Finally we style the forged tile element to adjust the spacing of the tile to give the feature more room and have the tile icon and the button added to take minimal space.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': 'light-brightness' }, 
            {'icon': 'mdi:invert-colors', 'feature': 'light-color-favorites' } 
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {%- do returns(feature_options() | length - 1) -%}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%} {{ options[index][key] }} {%- endif -%}  
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
    - type: button
      after: hui-tile-card $ hui-card-features
      icon: >-
        {{ feature_item(feature_next_index(uixForge.event.index | default(0) |
        int), 'icon') }}
      color: grey
      tap_action:
        action: fire-dom-event
        uix_forge:
          - forge_id: light_tile_{{config.element.entity}}
            data:
              index: >-
                {{ feature_next_index(uixForge.event.index | default(0) | int)
                }}
element:
  type: tile
  entity: light.bed_light
  features:
    - type: "{{ feature_item(uixForge.event.index | default(0) | int, 'feature') }}"
  features_position: inline
  uix:
    style: |
      ha-tile-icon {
        flex: 0;
      }
      ha-tile-info {
        flex: 1;
      }
      hui-card-features {
        flex: 2;
        padding-right: 0px !important;
      }

Full solution

Extra - features as an object

Up until now we have used and set features as a string, assigning the output from feature_item(index, 'feature') to - type: under features:. To extend the solution we can use features as an object. Careful construction of the object is needed here as it is set as a Python dict.

Changes required:

feature in the options array becomes an array with a single dict. For simple features the dict is { 'type': 'feature-string' }
features requiring more than just type can be added as a dict as the sole member of the array. In the example here, a custom feature of a button is used.
feature_item() now returns an object rather than a string and uses returns method.
features: config uses the output from feature_item() macro directly.

type: custom:uix-forge
forge:
  mold: card
  macros:
    feature_options:
      returns: true
      template: |
        {% set options = 
          [ 
            {'icon': 'mdi:lightbulb-on-50', 'feature': [ { 'type': 'light-brightness' } ] }, 
            {'icon': 'mdi:invert-colors', 'feature': [ { 'type': 'light-color-favorites' } ] },
            {'icon': 'mdi:cog', 'feature': [ { 'type': 'custom:service-call', 'entries': [ { 'type': 'button', 'icon': 'mdi:cog', 'thumb': 'default', 'tap_action': { 'action': 'more-info', 'target': { 'entity_id': 'light.bed_light' }, 'data': {} } } ] } ] }
          ] 
        %}
        {% do returns(options) %}
    feature_max_index:
      returns: true
      template: |
        {% do returns(feature_options() | length - 1) %}
    feature_next_index:
      params:
        - index
      returns: true
      template: |
        {%- set nextIndex = index | int + 1 -%}
        {%- set maxIndex = feature_max_index() | int -%}
        {%- do returns(nextIndex if nextIndex <= maxIndex else 0) -%}
    feature_item:
      returns: true
      params:
        - index
        - key
      template: >
        {%- set options = feature_options() -%} {%- if index >= 0 and index <
        options | length -%}  {%- set option = options[index][key] -%} {% do
        returns(option) %} {%- endif -%}
  sparks:
    - type: event
      forge_id: light_tile_{{config.element.entity}}
    - type: button
      after: hui-tile-card $ hui-card-features
      icon: >-
        {{ feature_item(feature_next_index(uixForge.event.index | default(0) |
        int), 'icon') }}
      color: grey
      tap_action:
        action: fire-dom-event
        uix_forge:
          - forge_id: light_tile_{{config.element.entity}}
            data:
              index: >-
                {{ feature_next_index(uixForge.event.index | default(0) | int)
                }}
element:
  type: tile
  entity: light.bed_light
  features: |
    {{ feature_item(uixForge.event.index | default(0) | int, 'feature') }}
  features_position: inline
  uix:
    style: |
      ha-tile-icon {
        flex: 0;
      }
      ha-tile-info {
        flex: 1;
      }
      hui-card-features {
        flex: 2;
        padding-right: 0px !important;
      }

Full solution

Using UIX Forge event spark to change a camera view

2026-04-06T00:00:00+00:00

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

Template entities in picture-entity cards

With UIX Forge, all forged element configs accept templates. This includes using a template for the element’s entity. To show this in the most basic form, we can include a simple string template for the entity and camera_image in a picture-entity card.

type: custom:uix-forge
forge:
  mold: card
  grid_options:
    columns: full
  sparks:
    - type: event
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  entity: "{{ 'camera.camera_1' }}"
  camera_image: "{{ 'camera.camera_1' }}"

picture-entity - Camera 1

Now change to another camera by adjusting the string template. This is to show how we will build up to using the event spark to change this using an event.

type: custom:uix-forge
forge:
  mold: card
  grid_options:
    columns: full
  sparks:
    - type: event
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  entity: "{{ 'camera.camera_2' }}"
  camera_image: "{{ 'camera.camera_2' }}"

picture-entity - Camera 2

Add event spark

The event spark config includes a forge_id. This allows the event spark to receive event data sent by Home Assistant Frontend events using fire-dom-event.

After adding an event spark, the forged element’s uixForge variable will include an event dictionary which will include the event data sent by a Home Assistant Frontend event. By default the event dictionary will be empty so any templates will need to handle this with either default() handling or using similar logic to handle data not being in the dictionary on first view.

For the picture-element the following is updated to implement the event spark:

Add event spark with forge_id: picture_camera.
Add templates with defaults for entity and camera_image.

type: custom:uix-forge
forge:
  mold: card
  grid_options:
    columns: full
  sparks:
    - type: event # event spark
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  # entity and camera_image use template with default to camera.camera_1
  entity: "{{ uixForge.event.entity | default('camera.camera_1') }}"
  camera_image: "{{ uixForge.event.entity | default('camera.camera_1') }}"

Add button badges

Now the picture-entity is ready to update its entity and camera_image from Home Assistant Frontend event using action: fire-dom-event from any Home Assistant element or any custom element that supports fire-dom-event actions which is the majority of custom elements.

For the picture-entity example, we add some button badges to a heading card inserted before the picture-element. We use three badges with different icons, and different data for our forge_id in the uix_forge config for fire-dom-event action. Once this done, the button badges can be used to control the camera entity and image.

type: heading
heading: Cameras
heading_style: title
badges:
  - type: button
    icon: mdi:numeric-1-circle
    tap_action:
      action: fire-dom-event
      uix_forge:
        - forge_id: picture_camera
          data:
            entity: camera.camera_1
  - type: button
    icon: mdi:numeric-2-circle
    tap_action:
      action: fire-dom-event
      uix_forge:
        - forge_id: picture_camera
          data:
            entity: camera.camera_2
  - type: button
    icon: mdi:numeric-3-circle
    tap_action:
      action: fire-dom-event
      uix_forge:
        - forge_id: picture_camera
          data:
            entity: camera.camera_3

picture-entity - dynamic camera views

Update to use a macro

As the same template is used for entity and camera_image a macro can be used to save having the default in multiple places. While this actually extends the number of lines of yaml config, it moves the default cameras image to one place in the config.

Macros and variables

Jinja macros are isolated from the where they are used so any variables you wish to use need to be a param of the macro

The macro added uses a param of uixForge which will be passed through from the updated template used for entity and camera_image.

type: custom:uix-forge
forge:
  mold: card
  macros:
    camera_entity:
      params:
        - uixForge
      template: "{{ uixForge.event.entity | default('camera.camera_1') }}"
  grid_options:
    columns: full
  sparks:
    - type: event
      forge_id: picture_camera
element:
  show_state: true
  show_name: true
  camera_view: auto
  fit_mode: cover
  type: picture-entity
  entity: "{{ camera_entity(uixForge) }}"
  camera_image: "{{ camera_entity(uixForge) }}"

Fullscreen media player dialog

2026-03-29T00:00:00+00:00

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 styling is included to make sure they are contained.

Styling dialogs is done using a theme. Check out styling dialogs

Style dialog size

First the dialog needs to be set to full width and height. As the web browser media player uses dialog size large --ha-dialog-width-lg, the size used when dialogs have size set to large, is overridden. Also set is --ha-dialog-width-full which is the size used when the dialog is shown on a small device screen. Safe areas are not considered here as it is likely you would wish the dialog to cover all of a device’s screen.

The web browser play media dialog will have a class of .type-hui-dialog-web-browser-play-media. This is used with a CSS selector to target the dialog only when it has class of .type-hui-dialog-web-browser-play-media.

Yaml style selectors are used as they will be needed in the following steps.

  uix-dialog-yaml: |
    .: |
      ha-dialog.type-hui-dialog-web-browser-play-media {
        --ha-dialog-width-lg: 100vw;
        --ha-dialog-width-full: 100vw;
        --ha-dialog-min-height: 100vh;
        --ha-dialog-border-radius: 0;
        --dialog-content-padding: 0;
      }

Style dialog header and content - full example

Since the styling is being applied in a theme for uix-dialog-yaml it will apply to all dialogs. So yaml selectors need to filter to the web browser dialog only using & Host/element selector.

The web browser play media dialog will have a class of .type-hui-dialog-web-browser-play-media A parent key selector of "&.type-hui-dialog-web-browser-play-media" is used to target the dialog only when it has class type .type-hui-dialog-web-browser-play-media.

Specific customizations:

The element itself .:
- img set to object-fit: contain; so when the media is an image it is not distorted.
"$ ha-dialog-header $" targeting the dialog header shadow root
- section.header-content display set to none to not show the title.
- header.header, the header bar, set to position: absolute with z-index: 1 so it shows at the top overlaid on the media image/video and color: white so the close X is most visible. Safe areas may be considered here on top position if required.
"$", the shadow root of the dialog.
- Background is set to black
- Display is set to flex to have image/media vertically aligned centrally.

  uix-dialog-yaml: |
    .: |
      ha-dialog.type-hui-dialog-web-browser-play-media {
        --ha-dialog-width-lg: 100vw;
        --ha-dialog-width-full: 100vw;
        --ha-dialog-min-height: 100vh;
        --ha-dialog-border-radius: 0;
        --dialog-content-padding: 0;
      }
    "&.type-hui-dialog-web-browser-play-media":
      .: |
        img {
          object-fit: contain;
        }
      "$ ha-dialog-header $": |
        section.header-content {
          display: none;
        }
        header.header {
          position: absolute;
          z-index: 1;
          color: white;
        }
      "$": |
        wa-dialog div.content-wrapper div.body {
          display: flex;
          background: black;
        }

Media player web browser styled fullscreen

Hide more-info dialog header

2026-03-29T00:00:00+00:00

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-adaptive-dialog. For the more-info dialog, UIX is applied in the light DOM of the adaptive dialog (ha-adaptive-dialog). To reach either dialog across the shadow root, the $ selector is required.

When the more-info dialog is ha-dialog, the full header item, ha-dialog-header, is in a slot in wa-dialog, which itself is in a shadow root of ha-dialog. The components used in ha-dialog-header are in slots in ha-dialog so styling these would not need crossing into ha-dialog shadow root.

When more-info is a bottom sheet (ha-bottom-sheet) the full header item, ha-dialog-header, is in a slot of ha-bottom-sheet.

Theme code hiding the more-info dialog header is shown below.

UIX Theme:
  uix-theme: UIX Theme

  uix-more-info-yaml: |
    "$":
      .: |
        ha-bottom-sheet slot:nth-of-type(1) ha-dialog-header
        {
          display: none;
        }
      "ha-dialog $": |
        wa-dialog slot:nth-of-type(1) ha-dialog-header {
          display: none;
        }

More-info dialog with header removed

Getting shadowy with themes - using host/element selector

2026-03-29T00:00:00+00:00

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 that is not styled with a CSS variable, or to inject keyframes into an element’s light DOM.

Continuing to use the power now badge on the built-in energy dashboard, the example below will change the border of the badge to double. This can only be done by styling in shadow root as the .badge class styling does not expose a CSS variable for border-style. Border color and width are styled on :host(.type-power-total) on the root element styling key .:, showing a good example of using both root and specific yaml keys with UIX yaml selection.

Host/element path selector

Applying this guide uses the & Host/element path selector

Badge Theme:
  uix-theme: Badge Theme
  uix-badge-yaml: |
    .: |
      :host(.type-power-total) {
        --ha-card-border-width: 3px;
        --ha-card-border-color: red;
      }
    "&.type-power-total ha-badge $": |
      .badge {
        border-style: double !important;
      }

Styled power now badge

Tile card feature height

2026-03-29T00:00:00+00:00

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 your browser to inspect the DOM and find the relevant feature whose height you wish to style.

The screenshot below shows hui-card-feature and that it indeed sets --feature-height: 42px;.

Step 2: run uix_style_path()

With hui-card-feature selected in browser’s inspector, run uix_style_path($0) - uix_path() is shorthand for uix_style_path().

Step 3a: style tile card locally

From the uix_style_path() output take the 📝 Boilerplate UIX YAML and use to style tile card locally on dashboard.

📝 Boilerplate UIX YAML

uix:
  style:
    "hui-card-features $": |
      hui-card-feature {
        /* your styles for hui-card-feature */
      }

Tile card styling

type: tile
entity: light.bed_light
name:
  type: entity
vertical: false
features_position: bottom
grid_options:
  columns: 12
  rows: 1
features:
  - type: light-brightness
uix: # Included from Boilerplate UIX YAML, filling in desired styling
  style:
    "hui-card-features $": |
      hui-card-feature {
        --feature-height: 20px;
      }

Step 3b: style tile card via theme

From the uix_style_path() output take the 📝 Boilerplate Theme YAML and use to create a new theme or add to an existing theme already set up for UIX styling. If you already have a theme you would just take the uix-card-yaml: section.

Merging UIX styling

If you already have uix-card: theme section and need to migrate to uix-card-yaml you need to place any existing under the root key .:. For more information see Updating uix- variable to uix--yaml variable

📝 Boilerplate Theme YAML

my-awesome-theme:
  uix-theme: my-awesome-theme
  uix-card-yaml: |
    "hui-card-features $": |
      hui-card-feature {
        /* your styles for hui-card-feature */
      }

Theme styling in existing theme

UIX Test:
  uix-theme: UIX Test

  uix-card-yaml: |
    "hui-card-features $": |
      hui-card-feature {
        --feature-height: 20px;
      }

Styled tile card feature height

Getting shadowy with themes - using templates

2026-03-03T00:00:00+00:00

Host/element selector

To save using a template just for type you can use the alternate method using Host/element selector

Config variable in templates

Every UIX template includes the variable config which is the element’s config. In all but very few cases, the config will include at least the element type as well as any user or strategy config. For this example, config.type == 'power-total'

Badge Theme:
  uix-theme: Badge Theme
  uix-badge-yaml: |
    .: |
      :host(.type-power-total) {
        --ha-card-border-width: 3px;
        --ha-card-border-color: red;
      }
    ha-badge $: |
      {% if config.type == 'power-total' %}
      .badge {
        border-style: double !important;
      }
      {% endif %}

Styled power now badge

Custom CSS variables

2026-03-02T00:00:00+00:00

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 the following where you may wish to use a concept of isDark across multiple entities rows, but not all rows.

type: entities
entities:
  - entity: sun.sun
    uix:
      style: |
        {% set isDark = is_state('sun.sun','below_horizon') %}
        hui-generic-entity-row {
          background: {{ 'darkslateblue' if isDark else 'inherit' }};
          color: {{ 'slategrey' if isDark else 'inherit' }};
          --state-icon-color: {{ 'slategrey' if isDark else 'inherit' }};
        }
  - entity: sun.sun
    uix:
      style: |
        {% set isDark = is_state('sun.sun','below_horizon') %}
        hui-generic-entity-row {
          background: {{ 'yellow' if not isDark else 'inherit' }};
          color: {{ 'orange' if not isDark else 'inherit' }};
          --state-icon-color: {{ 'orange' if not isDark else 'inherit' }};
        }

The isDark calculation here is pretty simple. However, repeating what may be a complex template calculation twice can be quite repetitive and prone to error when you need to adjust.

One method to simplify this, and make it better, uses custom CSS variables on :host reducing the templates used from two to one.

type: entities
uix:
  style: |
    :host {
      {% set isDark = is_state('sun.sun','below_horizon') %}
      --darkslateblue-if-dark: {{ 'darkslateblue' if isDark else 'inherit' }};
      --slategrey-if-dark: {{ 'slategrey' if isDark else 'inherit' }};
      --yellow-if-not-dark: {{ 'yellow' if not isDark else 'inherit' }};
      --orange-if-not-dark: {{ 'orange' if not isDark else 'inherit' }};
    }
entities:
  - entity: sun.sun
    uix:
      style: |
        hui-generic-entity-row {
          background: var(--darkslateblue-if-dark);
          color: var(--slategrey-if-dark);
          --state-icon-color: var(--slategrey-if-dark);
        }
  - entity: sun.sun
    uix:
      style: |
        hui-generic-entity-row {
          background: var(--yellow-if-not-dark);
          color: var(--orange-if-not-dark);
          --state-icon-color: var(--orange-if-not-dark);
        }

Style entities rows using custom CSS variables

UI eXtension Guides

Using UIX Forge tooltip and attribute sparks for tooltips

Scenario 1: Adjust a title attribute with the attribute spark

Scenario 2: Remove the title attribute and add the tooltip spark

Scenario 3: Adjust tooltip show and hide delay times

Scenario 4: Rich CSS styles, placement, and skidding

Testing dialogs in the browser console

Trigger a UIX update notification

Trigger an alert dialog

Trigger a confirmation dialog

Inspect UIX variables on a dialog element

Styling the dialogs you are testing

Using UIX Forge event and button sparks to change inline tile card feature

Template macros

Switch to tile element

Add event spark

Use buttons to test

Full solution

Extra - features as an object

Using UIX Forge event spark to change a camera view

Template entities in picture-entity cards

Add event spark

Add button badges

Update to use a macro

Fullscreen media player dialog

Style dialog size

Style dialog header and content - full example

Hide more-info dialog header

Getting shadowy with themes - using host/element selector

Tile card feature height

Step 1: find feature needing styling

Step 2: run uix_style_path()

Step 3a: style tile card locally

Step 3b: style tile card via theme

Getting shadowy with themes - using templates

Custom CSS variables