How To Create a Mushroom Card Grid Dashboard in Home Assistant

In this guide, I’m going to show you how to install and configure a beautiful dashboard using Mushroom Cards.

After I show you some of the example cards, I’ll show you how to create a beautiful nested grid Lovelace dashboard.

---

What are “Mushroom Cards”?

Mushroom Cards is a minimalistic, beautiful set of cards you can add to a Home Assistant dashboard. There is a built-in editor, color picker, icon picker, and much more. It supports both dark and light themes, and it doesn’t rely on any other integrations or dependancies.

Before I get too deep into this tutorial, I wanted to show you my before and after dashboards. Which one do you prefer?

---

What cards are available in Mushroom Cards?

With the Mushroom Card add, the following cards are currently available as of 3/23/22:

• Title card
• chips card
• template card
• cover card
• alarm card
• fan card
• light card
• and entity card

The developer states that there will be support for vacuum, climate, and media cards in the near future. I’ll be sure to update this guide when they are live.

---

How To Install Mushroom Card in Home Assistant

Installation is super easy. You’ll need have the Home Assistant Community Store (HACS) installed. Once HACS is installed, you can continue with this guide. (Manual instructions are here if you don’t have HACS installed)

Click HACS on your sidebar. Then Frontend.

Click the + button (Explore & Download Repositories). Then search for Mushroom.

Click Download This Repository With Hacs.

Complete the download, then reload your browser when it prompts you to.

---

Install Mushroom Themes

This is optional.

Click HACS > Frontend. Instead of clicking + like you did last time, just search for Mushroom. These are themes developed to go really well together with your new Mushroom Card dashboard.

Search for Mushroom. Then click Download.

Once installed, click your profile picture in the bottom left corner. Under Theme, choose Mushroom.

---

Create a Mushroom Dashboard “View”

For testing, you probably don’t want to throw a bunch of these cards into existing dashboards. So, we are going to create a new view. Plus, if you decide you like your new custom Mushroom dashboard better, you can simply set this dashboard as your default Home dashboard

Click the 3 dots in the top right corner of any Lovelace dashboard > Edit Dashboard.

Click the + symbol.

Name it Mushroom, use mdi:mushroom-outline, and then set the theme to Mushroom.

---

Available Mushroom Cards in Lovelace

Now that everything is installed, click Add Card from the dashboard view. Search for mushroom – you should see a bunch of card options.

Most of these are pretty self-explanatory, but I did want to show you just how customizable each card is. No YAML editing is needed.

Look at the all the options – I can change the icon, colors, name, and even the layout – all from the mushroom card!

---

Example Mushroom Card Layouts & Options

Below are some of the mushroom cards you can start adding to your dashboards.

---

Mushroom Alarm Panel

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
  - armed_home
  - armed_away
  - armed_night
name: Mushroom Alarm Panel

---

Mushroom Chips Card

These are sort of like an Entities card; you can add small “chips” inside the card, and each one is customizeable to display small amounts of information. In my screenshot, I added a person, weather, lock, and light.

Here’s an example of the customization for each chip.

type: custom:mushroom-chips-card
chips:
  - type: menu
  - type: entity
    entity: device_tracker.danny_pixel_5
    content_info: state
    name: Danny
    icon_color: blue
    double_tap_action:
      action: toggle
  - type: weather
    entity: weather.my_ecobee
    show_conditions: true
    show_temperature: true
  - type: entity
    entity: lock.touchpad_electronic_deadbolt
    content_info: name
    name: Front Door Lock
    icon_color: green
  - type: light
    entity: light.flux_kitchencabinets
alignment: center

---

Mushroom Cover Card

type: custom:mushroom-cover-card
entity: cover.garage_door
show_buttons_control: true
show_position_control: true
tap_action:
  action: toggle
hold_action:
  action: more-info

---

Mushroom Entity Card

type: custom:mushroom-entity-card
entity: remote.65_tcl_roku_tv
icon_color: purple
tap_action:
  action: toggle

---

Mushroom Light Card

type: custom:mushroom-light-card
entity: light.flux_kitchencabinets
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
use_light_color: true
name: LED Strip
icon: mdi:led-strip-variant

---

Mushroom Person Card

type: custom:mushroom-person-card
entity: device_tracker.danny_pixel_5
name: Danny

---

Create Mushroom “Grid” Dashboard in Home Assistant

One of the most popular Home Assistant dashboard styles is using a grid-based system. A grid dashboard is basically where you set up 3 columns of grids. A nested grid is when you add a grid card inside one of the existing grid columns.

Grid dashboards are a great way to format your Lovelace dashboard much easier. Without a grid, whenever you add a new card – it just adds it beneath the previous card. You can click the the up or down arrows to move cards around without a grid, but a grid lets you specify exactly what goes in each column. Grids also make editing dashboards in the future much simpler – no more needing to shift everything around.

On a blank Lovelace dashboard, click Add Card and search for Grid.

Add a 1-column grid and uncheck Render As Squares.

Then, add 1 large card (like the Alarm Control Panel or Calendar). Click save once added.

These large cards are temporary, it just helps to set the initial grid up. We are going to remove those and add Mushroom Cards and entities later on.

Add two more gridcards – both grids and both with large cards. It should look something like this:

Next, edit Column 1. You can now delete the temporary card (the calendar), and add your first Mushroom Cards.

Click the + button to add more entities to Column 1. Search for “mushroom” and choose an a card (For example, the Mushroom Entity Card).

You’ll want to add a few cards here, enough to fill half the column. If you don’t add enough, it will shrink your Lovelace view down to 2 columns.

---

Adding A Nested Grid

Next, let’s add your first nested grid. Remember: a nested grid is when you add a grid card inside the existing grid column.

Click the + button, then search for grid again. I’m going to add my two smart locks, so I set my columns to 2 and unchecked Render As Squares again.

Then, add a Mushroom Entity Card. Since we specified two columns, it puts the first entity in the first subcolumn. To add the 2nd lock, click the 2nd grid card’s + button.

So, just to recap, page 1 goes to the first row of the grid. Page 2 goes to the second row.

Once you are done adding things to this first grid, click Done.

It should now look something like this:

Go ahead and do the same thing for Column 2 and Column 3. Add as many Mushroom Cards as you want to each grid column!

Once you have everything setup the way you want it to, all 3 grids should be filled out like this:

---

Wrapping Up

Hopefully you guys decide to give Mushroom Cards a shot! They are a lot of fun to use, and it makes creating beautiful Home Assistant dashboards much, much easier. The entire dashboard above probably took me less than 15 minutes to create.