Liquid Glass Tile Card V2 - an iOS 26 "Liquid Glass" Tile Card for your Dashboard

Share your Projects! Dashboards & Frontend
1

Hey everyone,

This is the sequel to my earlier Liquid Glass Tile Card (v1). Different config schema, different use case — v1 is a single square/chip tile per entity, v2 groups several entities into one multi-row list. Both stick around and work fine side by side on the same dashboard.

I’ve been chasing the iOS 26 “Liquid Glass” look for my own Sections
dashboard for a while, and turned it into a proper custom card I’m happy
to share: Liquid Glass Tile Card V2.

It’s a frosted-glass multi-row tile card built for the modern Sections
layout. One card, many rows — each row gets its own entity and a type
of toggle, bar, or gauge, so lights, switches, sensors, and
read-only progress all live in the same card instead of separate card
types.

liquid_glass_tile_v2_collage
liquid_glass_tile_v2_collage1920×1116 195 KB

liquid_glass_tile_v2_lamps_outlets

What it does

  • Three row styles:
    • toggle — icon + name + status, with a real switch widget for
      controllable domains (light, switch, input_boolean, fan,
      siren); read-only status pill for everything else (binary_sensor,
      plain sensor, …)
    • bar — horizontal progress track with a draggable glass lens, for
      brightness/percentage-style values
    • gauge — circular ring gauge with a draggable glass lens, same
      data model as bar in a compact ring form
  • Rows are draggable (settable) whenever they represent an adjustable
    value (light brightness, number/input_number) and have no
    progress template — rows with a progress template are always
    read-only, driven entirely by the template. Dragging gives a glowing
    “lens” knob with light haptic ticks every 10% step.
  • Per-row JS templates ([[[ ... ]]], with states/hass/entity in
    scope) for color, progress, and state_text
  • Live color for dimmable/color lights: reads the current
    rgb_color/hs_color straight off live state on every update - no
    caching, no async lookups, so it can never show a stale color
  • Live wattage readout - set power_entity on a row to show a linked
    power sensor’s value as the subtext instead of the entity’s own
    state - handy for switched outlets
  • Tapping a row’s name always opens Home Assistant’s own more-info
    dialog (color wheel, color temperature, etc.), regardless of
    tap_action - dragging the row itself only ever sets
    brightness/value
  • Confirmation dialogs (tap_action.confirmation) for destructive
    actions
  • bg_opacity (0–1) to control how transparent the card’s own backdrop
    reads, e.g. to match more transparent native cards on the same view
  • Grid or list layout - layout: grid arranges rows two-per-line
    (nice for a block of gauges), or leave it as a stacked list

Switching a row from V1 (optional)

If you want to combine several v1 tiles into one v2 card, configs need
a small conversion - v1 keeps entity + slider/tint flat on the
card, v2 moves everything under rows:. Three quick examples:

Dimmable light

# V1
type: custom:liquid-glass-tile-card
entity: light.living_room
slider: true

# V2
type: custom:liquid-glass-tile-card-v2
rows:
  - entity: light.living_room
    type: bar

Switch with a template tint

# V1
type: custom:liquid-glass-tile-card
entity: switch.living_room_lamp
slider: true
tint: "[[[ return entity.state === 'on' ? '#FFC168' : null; ]]]"

# V2
type: custom:liquid-glass-tile-card-v2
rows:
  - entity: switch.living_room_lamp
    type: toggle
    color: "[[[ return entity.state === 'on' ? '#FFC168' : null; ]]]"

Read-only progress gauge

# V1
type: custom:liquid-glass-tile-card
entity: sensor.dishwasher_progress
name: Dishwasher
icon: mdi:dishwasher
tint: '#66BB6A'
tap_action:
  action: none
progress: "[[[ return Math.max(0, Math.min(100, parseFloat(entity.state) || 0)); ]]]"
state_text: "[[[ return entity.state + ' %'; ]]]"

# V2
type: custom:liquid-glass-tile-card-v2
rows:
  - entity: sensor.dishwasher_progress
    type: bar
    name: Dishwasher
    icon: mdi:dishwasher
    color: '#66BB6A'
    tap_action:
      action: none
    progress: "[[[ return Math.max(0, Math.min(100, parseFloat(entity.state) || 0)); ]]]"
    state_text: "[[[ return entity.state + ' %'; ]]]"

Want several rows in one card? Just add more entries to rows: -
that’s also how the old “chip list” use case works now, optionally
with layout: grid.

Installation

HACS (custom repository):

  1. HACS → “⋮” menu → Custom repositories
  2. Add the repo below, category Dashboard
  3. Install, then add the resource (HACS usually does this
    automatically):
    • Settings → Dashboards → Resources →
      /hacsfiles/liquid-glass-tile-card-v2/liquid-glass-tile-card-v2.js
      as a JavaScript Module

Manual: drop liquid-glass-tile-card-v2.js into /config/www/,
then add /local/liquid-glass-tile-card-v2.js as a resource the same
way.

Repo: GitHub - donsebby/liquid-glass-tile-card-v2

A companion card

If you like grouping related entities behind a collapsible header that
opens itself automatically when something inside is active (e.g. a
“Vacuum” section that pops open while it’s cleaning), I also split
that logic out into a small separate card: Auto Expander Card. Not
required for the tile card, just pairs nicely with it.

Feedback welcome

Issues, PRs, and screenshots of what you build with it are all very
welcome on GitHub. Hope it’s useful to someone else’s dashboard too!

2 Likes