chrisway / lovelace-mushroom

Mushroom Cards - Build a beautiful dashboard easily 🍄

🍄 Mushroom

What is mushroom ?

Mushroom is a collection of cards for Home Assistant Dashboard UI.

Mushroom mission is to propose easy to use components to build your Home Assistant dashboard.

Features

• 🛠 Editor for all cards and and all options (no need to edit yaml)
• 😍 Icon picker
• 🖌 Color picker
• 🚀 0 dependencies : no need to install another card.
• 🌈 Based on Material UI colors
• 🌓 Light and dark theme support
• 🎨 Optional theme customization
• 🌎 Internationalization

The goal of Mushroom is not to provide custom card for deep customization. You can use the excellent UI Lovelace Minimalist and Button card plugins for this.

Installation

HACS

Mushroom is available in HACS (Home Assistant Community Store).

1. Open HACS
2. Go to "Frontend" section
3. Click button with "+" icon
4. Search for "Mushroom"

Manual

1. Download mushroom.js file from the [latest-release].
2. Put mushroom.js file into your config/www folder.
3. Add reference to mushroom.js in Dashboard. There's two way to do that:
   • Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/mushroom.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
   • Using YAML: Add following code to lovelace section.

     resources:
         - url: /local/mushroom.js
           type: module

Usage

All the Mushroom cards can be configured using Dashboard UI editor.

1. In Dashboard UI, click 3 dots in top right corner.
2. Click Edit Dashboard.
3. Click Plus button to add a new card.
4. Find one of the Custom: Mushroom card in the list.

Cards

Different cards are available for differents entities :

• 🚨 Alarm card
• 🪟 Cover card
• 🪄 Entity card
• 💨 Fan card
• 💡 Light card
• 🙋 Person card
• 🛠 Template card
• 🔔 Chips card
• ✏️ Title card
• 📦 Update card
• 🧹 Vacuum card
• 📺 Media card
• 🔒 Lock card
• 💧 Humidifier card

Cards on the todo list :

• 🌡 Climate card

Theme customization

Mushroom works without theme but you can add a theme for better experience by installing the Mushroom Themes. If you want more information about themes, check out the official Home Assistant documentation about themes.

Development server

Home assistant demo

You can run a demo instance of Home Assistant with docker by running:

npm run start:hass

Once it's done, go to Home Assistant instance http://localhost:8123 and start configuration.

Windows Users

If you are on Windows, either run the above command in Powershell, or use the below if using Command Prompt:

npm run start:hass-cmd

Development

In another terminal, install dependencies and run development server:

npm install
npm start

Server will start on port 5000.

Home assistant configuration

Once both Home Assistant and mushroom are running, you have to add a resource to Home Assistant UI:

• Enable Advanced Mode in your profile page
• Go to Dashboard Resources and add the ressource http://localhost:5000/mushroom.js:
  Settings → Dashboards → More Options icon → Resources → Add Resource → Set URL as http://localhost:5000/mushroom.js → Set Resource type as JavaScript Module.

Build

You can build the mushroom.js file in dist folder by running the build command.

npm run build

Maintainer steps to add a new language

1. To be compatible with Home Assistant, language tags have to follow BCP 47. A list of most language tags can be found here: IANA subtag registry. Examples: fr, fr-CA, zh-Hans.
2. Create a new file {language_code}.json with your language code in the translation folder. Examples: fr.json.
3. Import your file into the localize.ts file and add your language in the languages record.
4. Don't forget to test locally with the development server by choosing the language with the Home Assistant UI in your profile.

Credits

The design is inspired by 7ahang’s work on Behance and Ui Lovelace Minimalist.