π 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 edityaml
)π 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π¦ Update cardπ§Ή Vacuum cardπΊ Media cardπ Lock 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 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
Maintainer steps to add a new language
- 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
. - Create a new file
{language_code}.json
with your language code in the translation folder. Examples:fr.json
. - Import your file into the
localize.ts file
and add your language in thelanguages
record. - 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.