🌟 Introducing the Google Components

giovannilamarmora · August 1, 2025, 10:19am

Are you looking to give your Home Assistant dashboard a modern, clean, and Google-inspired look?
Say hello to the Google Control Card, a custom card designed to bring elegance, clarity, and usability to your smart home interface.

Light Mode

Dark Mode

Features

Inspired by Google’s smart home UI.
Beautiful, responsive layout.
Seamless control of switches, climate entities, lights, and more.
Dark and light theme support.
Designed to integrate smoothly with existing dashboards.

Built with customization and user experience in mind, this card fits perfectly into any Lovelace setup and enhances both aesthetics and functionality.

Documentation & Setup

Getting started is easy!

Full documentation
Google Card Docs
Install via HACS or manually from GitHub.

GitHub Repository

View the source code and contribute on GitHub:
GitHub – lovelace-google-components

Credits

This project would not exist without the foundational work of:

@Nerwyn – Creator of the Material You theme for Home Assistant.
@beecho01 – Creator of the Material Symbol Icons for Home Assistant.
The Home Assistant frontend community.

Support the Project

If you enjoy this card and want to support its development:

Buy me a coffee

What’s Next?

We’re working on even more UI enhancements — follow the repo for updates, ideas, and contributions. Suggestions and PRs are always welcome!

maksym-ivchenko · August 1, 2025, 5:36pm

I’ve been waiting for someone to resurrect big-slider-card for a long time. Thank you so much for your work.
I see that these cards use hard-coded colors like in the Google Home app. And it looks really cool, but it doesn’t align with Nerwyn’s Material You theme. How do you feel about using the material-color-utilities module to harmonize the colors according to the colors and scheme the user specifies in Material You Utilities?

Nerwyn · August 2, 2025, 12:17am

I did recently add color harmonization to the Material Expressive betas for the theme and companion module. With that enabled you’d can try using the Home Assistant color custom properties instead of static values @giovannilamarmora.

giovannilamarmora · August 2, 2025, 5:40pm

Thanks for the heads-up! I’ll definitely take a look at the new color harmonization in the Material Expressive betas. It sounds like a great improvement.
I’ll work on applying the Home Assistant color custom properties soon!

giovannilamarmora · August 4, 2025, 5:31pm

Version 1.5.0 Released!
This new release brings the first experimental support for Material 3 Expressive with dynamic color harmony

Cards can now automatically harmonize with your active theme, delivering a more cohesive and polished visual experience.
This is just the beginning, your feedback is incredibly valuable to help refine and improve this feature.

Feel free to share your thoughts or open a discussion!
If you enjoy the project and want to support its development, consider making a small donation:

Buy me a coffee

Learn more and download from here:

Thank you all for the continued support

giovannilamarmora · September 3, 2025, 10:26am

Version 1.6.0 – Google Media Overlay is here!

We’re excited to introduce a major update to your Home Assistant experience with the new Google Media Overlay. Designed for seamless control and intuitive interactions, this release makes media management smoother than ever

What’s new:

Enhanced Playback Controls – Play, pause, skip tracks, and seek with responsive, real-time feedback.
Smooth Volume Drag – Adjust volume with a fluid slider that updates instantly.
Integrated Device Actions – Access device settings, remote controls, and external apps directly from the overlay.
Dynamic Theme Harmony – Cards automatically adapt to your Home Assistant theme for a cohesive, polished look

This release focuses on making your media interactions effortless and visually consistent, with an emphasis on both usability and aesthetics. Your feedback is invaluable to refine these features even further!

We’d love to hear your thoughts! Share your feedback or open a discussion in our community.
Enjoying the project? Consider supporting its development with a small donation:

Buy me a coffee

giovannilamarmora · September 5, 2025, 3:50pm

Using the icon Property

Available from lovelace-google-components version 1.7.0

The icon property is highly flexible and supports three usage modes across multiple Google cards:

Available for:

google-control-card
google-button-card
google-slider-card
google-climate-card

1. Static Icon

You can define a fixed icon, independent of the entity state:

type: custom:google-control-card
name: Lamp
entity: switch.lamp
icon: mdi:lightbulb

In this case, the icon will never change.

2. Dynamic Icon with stateObj

You can dynamically change the icon based on the entity state, using the [[[ ... ]]] JavaScript template syntax.

Inside the template you have access to:

entity → the full entity object
entity.state → the current state
hass → the global Home Assistant object (services, entities, attributes, etc.)

Example — Climate Control

type: custom:google-control-card
name: Heating
entity: climate.heating
icon: |
  [[[ 
    switch (entity.state) {
      case 'off': return 'm3s:thermometer';
      case 'heat': return 'mdi:fire';
      case 'cool': return 'mdi:mode-cool';
      case 'dry': return 'mdi:cool-to-dry';
      case 'heat_cool': return 'mdi:thermostat-auto';
      case 'auto': return 'mdi:auto-download';
      default: return 'mdi:thermometer';
    }
  ]]]

In this example, the icon changes automatically depending on the state (off, heat, cool, etc.).

3. Dynamic Icon with Attributes

You can also use entity attributes when choosing an icon:

icon: |
  [[[ 
    return entity.attributes.battery_level > 20 
      ? 'mdi:battery' 
      : 'mdi:battery-alert';
  ]]]

Important Notes

Always use proper YAML indentation. Use | for multiline templates.
If indentation is incorrect, you may get YAML errors like “bad indentation of a mapping entry”.
Always return a valid icon string (mdi:..., m3s:..., etc.).
If you want to use just state instead of entity.state, make sure the underlying TypeScript function has been updated to provide it.

Summary

icon: mdi:lamp → static
icon: | [[[ switch(entity.state) {...} ]]] → dynamic by state
icon: | [[[ return entity.attributes.xxx ]]] → dynamic by attributes

davidnestico · September 5, 2025, 7:11pm

This is awesome but can’t figure out how to use it? There’s no new media card or the “Show information” long press action just opens the normal Home Assistant more-info.

giovannilamarmora · September 8, 2025, 10:18am

Using the Google Media (Overlay)

The Google Media (Overlay) allows you to open a full-screen media control panel for your Google Cast devices (Nest Hub, Chromecast, etc.) directly from Lovelace.
It provides media playback controls, volume, and an enhanced UI optimized for both desktop and the Home Assistant mobile app (including swipe-to-close support).

How to Add a Button to Open the Media (Overlay)

To open the media, you can use the google-button-card with control_type: media_player.

Example Configuration:

type: custom:google-button-card
use_default_icon: true
use_default_toggle: true
icon: mdi:google-nest-hub
control_type: media_player
entity: media_player.next_hub

Options

use_default_icon: If true, the card will automatically use the default icon for the selected entity.
use_default_toggle: If true, the card will show the default toggle (play/pause or on/off depending on the entity type).
icon: (Optional) Override the default icon with a custom one.
control_type: media_player: Required to enable overlay support.
entity: The target entity (e.g. media_player.next_hub).

Usage

Tap the button → the Google Media (Overlay) opens with full media controls.
Control playback, volume, or switch apps (Spotify, YouTube, etc. if supported).
Close the overlay: click the close button ().

davidnestico · September 8, 2025, 7:43pm

Ok I got it to work but this seems false imo, it does not work on desktop, it only worked on the mobile app and you should specify that.

Another problem I have with this addon is that it seems you’ve hardcoded special icons that do not appear if you use the default MDI icons and not that icon pack, for me, there are no icons in the overlay, and even on the buttons or other cards until I switch them back to MDI icons, so I feel this needs to be addressed imo.

Another question, I’m curious what “open remote” does, cuz for me it just did nothing and opened more-info.

Screenshots of the button card and overlay, no icons appear so I didn’t know how to close the overlay, and when nothing is playing, it’s just blank and also buttons too have no backgrounds.

giovannilamarmora · September 15, 2025, 5:26pm

Hi! Thanks for the feedback

Regarding the icons, the issue seems to be that the addon uses a custom icon set by default, not MDI. To make them appear correctly, you’ll need to install the icon pack available on the Documentation.
Once installed, they should show up in the overlay, buttons, and other cards.

As for desktop functionality, it should work there as well. If you’re still not seeing the controls, try clean the cache or sharing a browser inspect so we can better understand what’s going wrong.

About “Open remote,” for now it will just open the more-info dialog.

giovannilamarmora · September 23, 2025, 3:49pm

Version 1.9.0 – Cover Support is here!

Google Slider Card – Cover Support

The google-slider-card supports cover entities (blinds, shutters, curtains) in Home Assistant. This guide explains how to configure and use them.

Minimum Configuration

To use a cover, set the following parameters:

type: custom:google-slider-card
entity: cover.living_room_blinds
control_type: cover

More options

Notes:

entity must be a cover (cover.* ) in Home Assistant.
control_type must be set to "cover" to enable position control.

Managed Attributes

When using a cover, the card automatically handles the cover position:

Attribute	Description
`currentValue`	Cover position percentage (0–100%)
`min` / `max`	The card enforces `0` and `100` for covers.
`opacity`	The card lowers opacity if the cover is `unavailable`.

You do not need to specify the attribute field, as the card always reads current_position for covers.

Interaction

Horizontal slide : drag the slider to change the cover position.
- The card updates currentValue in real time.
- On release (pointerup ), the new position is sent to the cover using the cover.set_cover_position service.
Tap / Hold : supported, but no default action for covers; you can capture events via hass-action .

Complete Example

type: custom:google-slider-card
entity: cover.bedroom_shutter
control_type: cover
icon: "mdi:window-shutter"
show_percentage: true
bold_text: true

Customizations

icon : choose a custom icon for the cover.
colorize : enable dynamic slider color (based on state; covers do not have default colors).
tap_action / hold_action : capture custom events when the user taps or holds on the cover.

giovannilamarmora · September 24, 2025, 3:54pm

Version 1.9.5 – Extended Color Modes is here!

Climate Card – Extended Color Modes

Starting from v1.9.5, the Google Climate Card introduces extended color support for all available HVAC modes. Each mode now comes with its own title, subtitle, icon, button, and background color scheme, consistent with Material Expressive 3 guidelines. This improves visual recognition and allows faster interaction based on color cues.

Auto and Heat Mode

Neutral warm tones for balanced automatic operation.

Light:

Dark:

Cool Mode

Blue tones representing cooling.

Light:

Dark:

Dry Mode

Yellow tones representing dehumidification.

Light:

Dark:

Fan Mode

Green tones representing air circulation / ventilation.

Light:

Dark:

Eco Mode

Soft green tones representing energy saving.

Light:

Dark:

Tip: Colors adapt automatically to Light and Dark themes, ensuring legibility and consistency across the UI.

stban1983 · September 25, 2025, 12:04pm

Great cards, i migrate my dashboard to your cards and material theme

laurens362 · September 25, 2025, 12:23pm

Can you adjust media card to we can change what we see in tap behavior? I got a Sonos and shield which I’d like to use

giovannilamarmora · September 26, 2025, 8:55am

Hi I’m not totally sure what you mean by “adjust media card so we can change what we see in tap behavior”. Do you mean modifying what happens when we tap the media card (for example, opening a different popup or switching between Sonos and Shield)?

laurens362 · September 26, 2025, 9:00am

This is what I currently see, but some options aren’t relevant for me, like Open Google Home or Open Remote. I’d really like to have custom actions here for my Sonos and Nvidia Shield — ideally with buttons. For example, it would be great to have quick buttons to play a radio station or lower the bass for example.

RenatoY · September 26, 2025, 9:10am

Maybe your project will run into problems in the future if you call it “Google Component,” since it wasn’t actually made by Google.

davidnestico · September 30, 2025, 8:36pm

Agreed, custom buttons would make it quicker to play something

giovannilamarmora · October 1, 2025, 12:04pm

Thanks a lot for the feedback! For the moment it will stay as it is, since I’m currently focusing on other projects. That said, this might change in the future as I revisit and expand the functionality.