π Mushroom
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).
- Open HACS
- Go to "Frontend" section
- Click button with "+" icon
- Search for "Mushroom"
Manual
- Download
mushroom.js
file from the [latest-release]. - Put
mushroom.js
file into yourconfig/www
folder. - 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 asJavaScript 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
- Using UI: Configuration β Lovelace Dashboards β Resources Tab β Click Plus button β Set Url as
Usage
All the Mushroom cards can be configured using Lovelace UI editor.
- In Lovelace UI, click 3 dots in top left corner.
- Click Configure UI.
- Click Plus button to add a new card.
- 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
Some cards are on the todo list :
- π‘ Climate card
- πΊ Media card
- π§Ή Vacuum 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 assitant instance http://localhost:8123 and start configuration.
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 asJavaScript Module
.
Build
You can build the mushroom.js
file in dist
folder by running the build command.
npm run build
Credits
The design is inspired by 7ahangβs work on Behance and Ui Lovelace Minimalist.