/lovelace-mushroom

Mushroom Cards - Build a beautiful dashboard easily 🍄

Primary LanguageTypeScriptApache License 2.0Apache-2.0

🍄 Mushroom

hacs release downloads build

Buy Me A Coffee

Overview

What is mushroom ?

Mushroom is a collection of cards for Home Assistant Lovelace 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 Lovelace. There's two way to do that:
    • Using UI: Configuration → Lovelace Dashboards → Resources Tab → Click Plus button → Set Url as /local/mushroom.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources Tab, 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 Lovelace UI editor.

  1. In Lovelace UI, click 3 dots in top left corner.
  2. Click Configure UI.
  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 :

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:

  • Go on your profile

  • Enable Advanced mode

  • Then go to Lovelace resources

  • Add the ressource http://localhost:5000/mushroom.js:

    Configuration → Lovelace Dashboards → Resources Tab → Click Plus button → 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.