Mushroom Cards: How To Build a Clean Minimalistic Home Assistant UI

UPDATE: Part 2 is here: Mushroom Cards Part 2: Room Layout and Card Combinations

If you have never wanted to pull your hair out tinkering with Home Assistant, you have not explored its true potential. Configuring the Lovelace UI using custom cards is one of those things. The community has offered a wide variety of custom cards with different uses throughout the years, but setting them up can be extremely time consuming to say the least.
You see all those beautiful minimalistic dashboard designs and think you are never going to make something similar. Because, well, you hate YAML and you simply don’t have the time. 

Well, developer Piitaya has developed a set of beautiful minimalistic cards which include an easy built-in UI editor, which streamlines Lovelace configuration. All credit goes to him!

Advertisement Advertisement

Features & Card List

Features:

  • Built-in UI editor for all card and options (no need for YAML)
  • Independent: No need to install more cards
  • Icon picker
  • Color picker
  • Based on Material UI Colors
  • Light and Dark themes support
  • Optional theme customization
  • Internationalization

Cards:

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

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
Code language: YAML (yaml)

Card Configuration & Examples

These collection of cards can easily be used to create a beautiful and clean minimalist dashboard in Home Assistant. Every card has its own built-in UI editor, almost all of their features are configurable through it. Nevertheless, in this tutorial I will be presenting the cards with YAML, so you can copy-paste it to your config and go from there.

Title Card

Simple Title Card block, used to separate a section of cards or name your dashboard.

type: custom:mushroom-title-card title: Hello, SmartHomeScene! subtitle: A blog for Home Assistant enthusiasts!
Code language: YAML (yaml)

Title card supports templating both in the tittle and subtitle field:

type: custom:mushroom-title-card title: Hello, SmartHomeScene! subtitle: >- Currently {{ states.light | selectattr('state','eq','on') | list | count }} lights are on!
Code language: YAML (yaml)

Chips Card

The Chips Card includes several small types of chip-cards whose main purpose is to display small information at the top of your dashboard layout. It includes the following cards:

  • Action Chip: Allows you to perform any Home Assistant action (navigate, call-service)
  • Alarm Control Panel Chip: An entity chip that allows you to display alarm info.
  • Back Chip: Allows you to perform a back action.
  • Conditional Chip: Allows you to display another chip based on chip state.
  • Entity Chip: Allows you to display any entity state.
  • Light Chip: Allows you to display light state.
  • Menu Chip: Open the HA side menu.
  • Weather Chip: Displays weather info.
  • Template Chip: Cook your own chip!

Advertisement Advertisement

Chips Card nested in a vertical-stack with a map card showing person entity location. Conditional card shows up, when baby light is on.

type: vertical-stack cards: - type: custom:mushroom-chips-card chips: - type: menu - type: entity entity: alarm_control_panel.apartment - type: entity entity: person.person1 icon: mdi:face-man - type: entity entity: person.person2 icon: mdi:face-woman - type: conditional conditions: - entity: light.kids_room_l1 state: 'on' chip: type: template content: Baby light is On icon: mdi:lightbulb-on-outline icon_color: yellow - type: map entities: - device_tracker.phone1 - device_tracker.phone2 dark_mode: true
Code language: YAML (yaml)

Chips Card nested in a vertical-stack with a weather card showing Sun and Moon information. Templating is used for the sunrise and sunset chips.

type: vertical-stack cards: - type: custom:mushroom-chips-card chips: - type: entity entity: sun.sun - type: template content: >- Sunrise {% if states.sun.sun %} {{ (as_timestamp(states.sun.sun.attributes.next_rising)) | timestamp_custom(('%H:%M') )}} {% endif %} icon: mdi:weather-sunset-up - type: template content: >- Sunset {% if states.sun.sun %} {{ (as_timestamp(states.sun.sun.attributes.next_setting)) | timestamp_custom(('%H:%M') )}} {% endif %} icon: mdi:weather-sunset-down - type: entity entity: sensor.moon - type: weather-forecast entity: weather.home secondary_info_attribute: humidity show_current: true show_forecast: true
Code language: YAML (yaml)

Alarm Card

The alarm panel card can be used to control your alarm_control_panel entity. Three layouts are available, default, horizontal, vertical.

Advertisement Advertisement

type: custom:mushroom-alarm-control-panel-card entity: alarm_control_panel.apartment states: - armed_home - armed_away name: Apartment icon: mdi:shield-home layout: vertical
Code language: YAML (yaml)

Light Card

A bunch of light entities with or without brightness control, nested within a vertical-stack and five horizontal stacks. Three layouts are available, default, horizontal and vertical. Brightness temperature and color control are available only if your entity supports them.

Note: My dimmable LED lights are controlled through MoesHouse ZigBee Touch Dimmer. Its an excellent and beautiful dimmer device.

type: vertical-stack cards: - type: custom:mushroom-title-card title: All Lights - type: horizontal-stack cards: - type: custom:mushroom-light-card entity: light.kitchen_led use_light_color: true - type: custom:mushroom-light-card entity: light.bar_lights show_brightness_control: true - type: horizontal-stack cards: - type: custom:mushroom-light-card entity: light.terrace - type: custom:mushroom-light-card entity: light.element_lights - type: horizontal-stack cards: - type: custom:mushroom-light-card entity: light.dining_room - type: custom:mushroom-light-card entity: light.living_room - type: horizontal-stack cards: - type: custom:mushroom-light-card entity: light.wall_1 name: Wall 1 - type: custom:mushroom-light-card entity: light.wall_2 name: Wall 2 - type: custom:mushroom-light-card entity: light.wall_3 name: Wall 3 - type: horizontal-stack cards: - type: custom:mushroom-light-card entity: light.kids_room_l1 name: Baby Night Light use_light_color: true show_brightness_control: true show_color_temp_control: true show_color_control: true
Code language: YAML (yaml)

Person Card

Used to display your person entity in a vertical or horizontal layout. Custom actions can be applied to one tap, double tap, hold.

type: horizontal-stack cards: - type: custom:mushroom-person-card entity: person.person1 use_entity_picture: true name: Mushroom Tutorial layout: vertical hide_state: true - type: custom:mushroom-person-card entity: person.person2 name: SmartHomeScene.com use_entity_picture: true hide_state: true
Code language: YAML (yaml)

Entity Card

The Mushroom Entity card can be used to display and control any kind of entity. You can set the layout, set icon, name, primary and secondary information shown, and choose color from a dropdown menu. Custom actions can be specified for tap, double tap and hold. Example:

Mushroom Title Card, Chips Card, and entities card inside a vertical stack and a couple of horizontal stacks. Templates are used in the subtitle of the title card, to calculate days remaining to next partial and full clean of the aquarium.

You can check out my full guide of how I automated my aquarium with a Sonoff 4CH Pro HEREThe Sonoff is wired through a TuYa Smart Plug to monitor power consumption.

type: vertical-stack cards: - type: custom:mushroom-title-card title: Lulu's Aquarium subtitle: >- Weekly Clean: {% if states.input_datetime.aquarium_weekly_clean %} {{(((as_timestamp(now())-states.input_datetime.aquarium_weekly_clean.attributes.timestamp)) | int(0) /60/1440-1) | round(0) }} day(s) ago Monthly Clean: {{ (((as_timestamp(now())-states.input_datetime.aquarium_monthly_clean.attributes.timestamp)) | int(0) /60/1440) | round(0) }} day(s) ago {% endif %} - type: custom:mushroom-chips-card chips: - type: menu - type: template content: Lulu icon: mdi:tortoise - type: entity entity: input_datetime.aquarium_weekly_clean icon: mdi:fishbowl-outline - type: entity entity: input_datetime.aquarium_monthly_clean - type: horizontal-stack cards: - type: custom:mushroom-entity-card entity: switch.sonoff_aquarium_heater icon_color: red primary_info: state secondary_info: name - type: custom:mushroom-entity-card entity: switch.sonoff_aquarium_pump primary_info: state secondary_info: name - type: horizontal-stack cards: - type: custom:mushroom-entity-card entity: light.sonoff_aquarium_light primary_info: state secondary_info: name icon_color: amber tap_action: action: toggle - type: custom:mushroom-entity-card entity: light.aquarium_uvb primary_info: state secondary_info: name icon_color: amber
Code language: YAML (yaml)

Template Card

The Mushroom Template Card allows you to use HA templating to display any kind of information or entity. icon, icon_color, primary and secondary are templatable fields which can customize. 

type: custom:mushroom-template-card primary: Hello, {{user}} secondary: | Location: {% if is_state('device_tracker.phone1', 'home') %} Home {% elif is_state('device_tracker.phone1', 'Work') %} Work {% elif is_state('device_tracker.phone1', 'Bar') %} Bar {% else %} Away {{ states('device_tracker.phone1') }}. {% endif %} icon: | {% if is_state('device_tracker.phone1', 'home') %} mdi:home-account {% elif is_state('device_tracker.phone1', 'work') %} mdi:desktop-classic {% elif is_state('device_tracker.phone1', 'Bar') %} mdi:beer {% else %} mdi:home-search {% endif %} entity: person.person1 icon_color: | {% if is_state('device_tracker.phone1', 'home') %} green {% elif is_state('device_tracker.phone1', 'work') %} red {% elif is_state('device_tracker.phone1', 'Bar') %} orange {% else %} cyan {% endif %}
Code language: YAML (yaml)

Advertisement Advertisement

Note: To be able to use location zones, you need to first define them in Home Assistant. To do that, head to Configuration > People & Zones > Zones > +Add Zone. Also, location tracking must be enable in the Home Assistant companion app on your mobile device.

Summary & Screenshots

Considering this collection of cards has its own UI editor, it is very beginner friendly and easy to configure. On the other hand, it supports Jinja2 templating to many of its important fields so it can be heavily customized . What you can eventually display in your dashboard is limitless considering the nature of Home Assistant templates.

Sources:


You can support this blog by buying us a coffee!

27 thoughts on “Mushroom Cards: How To Build a Clean Minimalistic Home Assistant UI”

  1. Hi,
    One the second screen you used very interesting climate card. I can’t see it in mushrooms repository. Can you share what it is?

      1. any chance you can share the config for the thermostat card, that is a nice setup and I cant figure out how to do it.

        1. Hello, this is the code for the simple thermostat card. I use card-mod to style the card to match the mushroom layout:

          type: custom:simple-thermostat
          style: |
          ha-card {
          --st-font-size-xl: 40px;
          --st-spacing: 3px;
          --st-font-size-m: 25px;
          --st-font-size-sensors: 14px
          }
          entity: climate.living_room
          step_size: 0.1
          header: false
          layout:
          step: row
          mode:
          names: false
          headings: false
          icons: true
          control:
          - hvac

    1. Hello Thomas,
      Thank you for the question.

      We feel like you misinterpreted that the original dev, piitaya wrote this guide. This is not the case, we are a team of home automation enthusiasts with a passion for Home Assistant.

      To answer your original question, Minimalist UI is configured only through YAML and allows full customization and utilization of custom cards. Mushroom Cards adapts a lot of those cards and makes them completely configurable through the Lovelace UI Editor.
      This smooths out the difficulty curve and allows beginners to build a clean and minimalistic UI without writing YAML.

  2. Great write up, thanks for introducing me into Mushroom. One question: how do you get 3 columns? Im trying it with horizontal-stack and than vertical-stack, 3 times, but they’re still below each other…

    Thanks!

    1. Hello Robert,
      To achieve a stack you need to nest several horizontal-stack within a vertical-stack.
      type: vertical-stack
      cards:
      – type: horizontal-stack
      ….cards:
      – type: horizontal-stack
      ….cards:
      – type: horizontal-stack
      …..cards:

      You use mushroom cards within the horizontal-stacks. Cheers!

  3. Looks nice! This inspired me to spruce up my dashboard. Do you know if there’s a way to increase the size of the chips card? They look fine on my PC, but on mobile they’re pretty small.

  4. Cannot find how to find the file mentioned in step 1:
    “Download mushroom.js file from the [latest-release]”

    I’m trying to use Mushroom on my Home-Assistant running on Synology/docker.

  5. Really great write up. I think I need to check this out.

    Thanks for pointing us to the thermostat card, although it looks like there’s one on the way on the Mushroom repo. But the one thing I kinda can’t live without, is the ability to have a simple webpage card that I can iframe my weather radar into.

    Mushroom doesn’t appear to support a card like this, but is there a way to mix and match a little? A couple of the cards you are using would appear to be custom cards, but maybe I have this all wrong.

    1. Hello Luciano,

      Those backgrounds come with the themes. However, you need to add background: var(–background-image) to your lovelace-ui.yaml file in order for them to work.

  6. I’m using the same theme with mushroom cards, however the text on my cards is gray. How can I change the card text to white like in your examples?

  7. It would be nice to have a thermostat card. Same as the lights one that I can included a slider and define min and max to the slider. Should be pretty easy for you to implement….

    1. Hello,

      I’ve since dismantled that particular homepage, because I do tutorials constantly. Please tell me what you need, I’ll see if I can send you some code.

      Cheers

    1. Hi Rich,

      This is the generic weather forecast card that comes with HA. You need to change you Home Assistant time format to 12hr. This is done in Settings > System > General.
      Cheers!

Leave a Comment

Your email address will not be published.

DISCLOSURE
SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program and AliExpress Portals Affiliate Program. These programs are designed to provide means for websites to earn revenue by linking affiliate products through their content. We are compensated for referring traffic and business to these websites.
SmartHomeScene.com

Scroll to Top