⚙️ Requirements
To use the Material Home Component, a few additional dependencies and integrations are required to ensure full compatibility and styling. Below are the minimum requirements:
🛠 Home Assistant Community Store (HACS) – Required
IMPORTANT
📥 Installing via HACS is strongly recommended for easy management and updates of custom components.
🎨 Material You Theme & Utils – @Nerwyn – Recommended
IMPORTANT
To enable Material You styling (dynamic colors, adaptive palettes), you’ll need a theme that supports Material You variables.
- Includes light/dark mode support
- Supports dynamic color palettes (Material You)
- Defines required CSS variables for custom cards
🧷 Material Symbol Icons – @beecho01 – Required
IMPORTANT
This component uses the Material Design Icons set for consistency with Google’s UI.
Make sure icons are enabled in your instance (enabled by default in modern HA versions).
The icons come in six distinct styles, each with its own prefix:
- Outlined:
m3o - Outlined and filled:
m3of - Rounded:
m3r - Rounded and filled:
m3rf - Sharp:
m3s - Sharp and filled:
m3sf
🅰️ Recommended Font: Figtree – (Optional, but encouraged)
We recommend the Figtree font for a look very close to Google Sans, the font used in official Google apps. If not available, the system will fall back to Roboto.
To install Figtree:
Go to Dashboard → Edit dashboard → Menu (⋮) → Manage Resources
Click + Add Resource
Use this URL:
https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1, 300..900&display=swapSelect Resource Type:
StylesheetClick Create
Hard refresh your browser (CTRL + F5) or clear the app cache
🧭 Required Custom Cards
To achieve the full Google Home UI experience, install the following cards via HACS:
📌 Swipe Card
NOTE
Enables horizontal swipeable views for dashboards, similar to the Google Home app tabbed interface.
- Allows seamless swiping between different sections (e.g. Cameras, Lighting, Wi-Fi, Climate)
- Highly configurable with
parameters,spaceBetween,slidesPerView, etc.
📌 Button Card
NOTE
The backbone of the UI—used to build powerful, styled buttons with dynamic content.
- Fully supports entity states, custom templates, and CSS-style controls
- Each dashboard item (camera, light, climate...) uses this card with custom styling and icons
📌 Card Mod
CORE FUNCTION
The backbone of the UI—used to bypass standard design limits by applying dynamic CSS styles based on entity states.
Key Features:
- Full CSS Control: Customize borders, backgrounds, animations, and spacing for any card.
- Dynamic Templating: Fully supports Jinja2 templates (e.g., changing colors or icons based on whether a device is on or off).
- Universal Integration: Applied across all dashboard modules (Camera, Light, Climate) to ensure a cohesive and polished look.
📌 Auto Entities
CORE FUNCTION
The UI’s "search engine"—automatically populates cards with entities that match specific criteria, removing the need to manually add every new device.
Key Features:
- Smart Filtering: Automatically display devices based on state (e.g., "all lights that are on"), domain (e.g., "all binary sensors"), or specific attributes.
- Dynamic Management: As soon as you add a new device to Home Assistant, it will appear in the correct card if it matches the filter, without you touching a line of YAML.
- Sorting & Grouping: Organize results by name, state, last changed, or even randomly, with the ability to limit the total number of items shown.
- Native Integration: Works by "wrapping" around any other card (like entities, glance, or grid), acting as the logic layer for what should be displayed.