📦 Installation Guide – Material Home Component for Home Assistant

---

✨ 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 (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/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 within material-components.js.