📦 Installation Guide – Material Home Component for Home Assistant

💎 Paid Version

To ensure the premium version functions correctly, it is mandatory to completely remove the free version before installing the paid one. Having both versions installed simultaneously may cause conflicts or prevent premium features from loading properly.

Still experiencing issues?
Support Email: [email protected]
Report an Issue: Open an issue on our official GitHub repository

---

✨ Introducing the Material Components

Home Assistant Forumcommunity.home-assistant.io

---

You can install the Free component in three ways:

📓 Method 1 – HACS Installation

There are two ways to install the component via HACS:
either by clicking the button below or by manually adding the repository.

---

🚀 Option 1 – One-Click Installation (Recommended)

If you already have HACS installed, you can add the repository directly by clicking this button:

Then, simply install the plugin from the HACS interface.

---

🔧 Option 2 – Manual Installation via HACS

1. Open HACS in your Home Assistant interface.

2. Go to Settings → Custom repositories.

3. Click Add repository and enter the following URL:

   https://github.com/giovannilamarmora/lovelace-material-components

4. Select Plugin as the category.

5. Click Add to confirm.

6. Go to HACS → Frontend, search for Material Home Component, then click Install.

7. Restart Home Assistant to complete the setup.

---

🔧 Method 2 – Manual Installation (local file)

1. Download the file material-components.js from the dist folder of the GitHub repository.

2. Copy it into your Home Assistant configuration folder:

   config/www/material-components.js

3. Open Home Assistant and go to:
   Settings → Dashboards → ⋮ (three dots) → Manage Resources

   Or: Settings → Dashboards → Resources depending on your HA version.

4. Click Add Resource:

   • Type: JavaScript module
   • URL: /local/material-components.js

5. Click Save and restart Home Assistant (or reload just the dashboard if possible).

---

☁️ Method 3 – Install via CDN (jsDelivr)

1. Open Home Assistant and go to:
   Settings → Dashboards → Manage Resources

2. Click Add Resource:

   • Type: JavaScript module

   • URL:

     https://cdn.jsdelivr.net/gh/giovannilamarmora/lovelace-material-
     components@master/dist/material-components.js?v=20250626

3. Click Save and restart Home Assistant.

TIP

🌀 The ?v=20250626 version query ensures cache is refreshed.
You can increment the number (e.g., ?v=20250701) whenever you update the file in GitHub.

---

✅ How to Use

After installation, you can use the custom components like this:

type: custom:material-dashboard-card

Or other components bundled within material-components.js.

You can install the Paid component with HACS:

📓 HACS Installation

There are two ways to install the component via HACS:
either by clicking the button below or by manually adding the repository.

---

🚀 Option 1 – One-Click Installation

If you have HACS installed, you can add the repository directly by clicking the button below:

IMPORTANT

⏳ Waiting List: This feature will be available as soon as the repository is officially validated.

Once the button is active, simply follow the on-screen instructions to install the plugin via the HACS interface.

---

🔧 Option 2 – Manual Installation via HACS

1. Open HACS in your Home Assistant interface.

2. Go to Settings → Custom repositories.

3. Click Add repository and enter the following URL:

   https://github.com/Material-Home-Assistant/material-home-assistant-
   integration.git

4. Select Integration as the category.

5. Click Add to confirm.

6. Go to HACS → Frontend, search for Material Home Assistant, then click Install.

7. Restart Home Assistant to complete the setup.

---

✅ How to Use

After installation, you can use the custom components like this:

type: custom:material-dashboard-card

Or other components bundled.