Skip to content

UIX Forge

UIX Forge forges Home Assistant elements with templates in its element configuration and additional augmentation through UIX Forge Sparks. Its layered configuration mode also lets a wrapped element retain its own template fields while Forge templates a separate overlay.

Forge supports the card, badge, row, picture-element, section, footer, and card-feature molds. Cross-context molds allow embedding one element type in a different parent context, such as a card used as a row inside an entities card — see Cross-context molds. Layered configuration is available for every mold.

See Forge for complete forge config reference.

Foundries

A foundry is a reusable UIX Forge configuration that lets you define forge, element, element_base, and uix fragments once and share them across many cards. A resolved element_base selects layered configuration; element_disabled_paths remains local to the consuming Forge.

See Foundries for a full guide including merge behaviour, nested foundries, and management via the integration options.

Sparks

Sparks are optional behaviours that you add to the forge.sparks list. Each spark has a type key and its own options.

Available sparks:

  • 💬 Tooltip — attach a styled tooltip to any element inside the forged element.
  • Button - attach a styled button (ha-button) with actions as a sibling before or after any element within the forged element.
  • Badge - insert a Web Awesome-styled uix-badge as a sibling before or after any element within the forged element.
  • 🏷 Attribute — add, replace or remove an attribute of any element within the forged element.
  • ⚡ Event — receive DOM events from fire-dom-event actions and expose their data as template variables.
  • ⭐ Tile Icon — insert a ha-tile-icon element as a sibling before or after any element within the forged element.
  • 🛡 State badge - insert a state-badge element as a sibling before or after any element within the forged element.
  • Grid - apply CSS Grid layout to any container element inside a forged element
  • 🔍 Search - queries a container within a forged element with a CSS selector and optional inner text to find, then apply mutations to the found element(s).
  • Map — preserve the map view and add tours, history sliders, and entity filters with configurable control positions.
  • Lock — overlay a lock icon on any element to block interaction until the user passes a PIN, passphrase, or confirmation challenge.
  • Form — add a Home Assistant form and optional submit and clear actions to a forged element.
  • Overlay Icon — overlay a ha-icon/ha-state-icon on any element inside the forged element.
  • Background — inject a background layer (colour, image, video, or live camera) behind any element within the forged element.
  • Theme — apply a Frontend theme to the forged element or one of its descendants.