Mushroom Cards Home Assistant: How To Build a Clean Minimalistic 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 the dev.

Features & Card List

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

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!

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!

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!

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

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

Alarm Card

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

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

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

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

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 HERE. The 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

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 %}

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.