How to Install and Configure a Beautiful Dashboard Using Mushroom Cards (2024)

In this guide, we will show you how to install and configure a beautiful dashboard using Mushroom Cards for your Home Assistant setup. Mushroom Cards is a minimalistic and aesthetically pleasing set of cards that can be added to your Home Assistant dashboard. It offers a built-in editor, color picker, icon picker, and more. With support for both dark and light themes, Mushroom Cards provides a versatile and customizable dashboard experience without relying on any other integrations or dependencies.

Before and After Dashboards

Before we dive into the tutorial, let's take a look at the before and after dashboards using Mushroom Cards. Here are two examples:

Before Dashboard:

After Dashboard:

Which one do you prefer? The after dashboard showcases the enhanced visual appeal and organization that Mushroom Cards can bring to your Home Assistant setup.

Available Mushroom Cards

Mushroom Cards offer a variety of card options to choose from. As of 3/23/22, the following cards are available:

Title card
Chips card
Template card
Cover card
Alarm card
Fan card
Light card
Entity card

The developer has also mentioned that there will be support for vacuum, climate, and media cards in the near future. Keep an eye out for updates!

Installation Steps

To install Mushroom Cards in Home Assistant, follow these simple steps:

Make sure you have the Home Assistant Community Store (HACS) installed. If not, you can find manual instructions .
Open Home Assistant and navigate to the HACS section by clicking on "HACS" in the sidebar.
In the HACS section, click on "Frontend."
Click the "+" button to explore and download repositories.
Search for "Mushroom" and select "Mushroom Cards" from the results.
Click "Download" to start the installation process.
Once the download is complete, you will be prompted to reload your browser. Click "Reload" to finish the installation.

Installing Mushroom Themes (Optional)

If you want to enhance the visual experience further, you can also install Mushroom Themes. Here's how:

Open Home Assistant and navigate to the HACS section by clicking on "HACS" in the sidebar.
In the HACS section, click on "Frontend."
Instead of clicking the "+" button, search for "Mushroom" again.
Select "Mushroom Themes" from the results.
Click "Download" to start the installation.
Once installed, click on your profile picture in the bottom left corner.
Under "Theme," choose "Mushroom" to apply the theme.

Creating a Mushroom Dashboard

To create a Mushroom dashboard, follow these steps:

On any Lovelace dashboard, click the three dots in the top right corner and select "Edit Dashboard."
Click the "+" symbol to add a new card.
Name the dashboard "Mushroom," use the icon "mdi:mushroom-outline," and set the theme to "Mushroom."
This new dashboard will serve as your Mushroom dashboard view.

Adding Mushroom Cards to the Dashboard

Now that everything is set up, you can start adding Mushroom Cards to your dashboard. Here's how:

Open the Mushroom dashboard view.
Click "Add Card" to add a new card.
Search for "mushroom" to see the available card options.
Choose a card that suits your needs and preferences.
Customize the card by changing the icon, colors, name, and layout directly from the Mushroom Card editor. No YAML editing is required!

Example Mushroom Card Layouts & Options

Let's take a look at some example Mushroom Card layouts and options:

Mushroom Alarm Panel:

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

Mushroom Chips Card:

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

Creating a Mushroom "Grid" Dashboard

If you prefer a grid-based dashboard layout, you can create a Mushroom "Grid" dashboard. Here's how:

On a blank Lovelace dashboard, click "Add Card" and search for "Grid."
Add a 1-column grid and uncheck "Render As Squares."
Add a large card, such as the Alarm Control Panel or Calendar, to the grid.
Add two more grid cards, both with large cards, to complete the initial setup.
Edit Column 1 and delete the temporary card (e.g., the calendar).
Add Mushroom Cards to Column 1 by clicking the "+" button and searching for "mushroom."
Add enough cards to fill half the column to avoid shrinking the Lovelace view to 2 columns.
To add a nested grid, click the "+" button in the desired grid card and search for "grid" again.
Specify the number of columns and uncheck "Render As Squares" if needed.
Add Mushroom Cards or entities to the nested grid.
Repeat the process for Columns 2 and 3, adding Mushroom Cards as desired.

Once you have set up your Mushroom "Grid" dashboard, all three grids should be filled with Mushroom Cards, creating a visually appealing and organized layout.

Conclusion

Mushroom Cards offer a fantastic way to enhance the visual appeal and functionality of your Home Assistant dashboard. With a wide range of customizable options and easy installation steps, you can create a beautiful and personalized dashboard experience. Whether you prefer a traditional layout or a grid-based design, Mushroom Cards provide the flexibility to meet your needs. Give Mushroom Cards a try and enjoy creating stunning Home Assistant dashboards in no time!

Recommended Home Assistant Devices

If you're looking to expand your Home Assistant setup, here are some recommended devices:

Z-Wave/Zigbee hub: Nortek GoControl HUSBZB-1
Smart Plugs: Sonoff S31 Lite Zigbee
Motion Sensors: Hue Indoor Motion
Outdoor Camera: Amcrest IP5M Turret
Robot Vacuum: Roborock S7

These devices are compatible with Home Assistant and have been personally recommended for their reliability and performance.

Remember, creating a visually appealing and functional Home Assistant dashboard is just one aspect of optimizing your smart home experience. Explore the possibilities, experiment with different configurations, and make your smart home truly yours.