Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

Can be even shorter:


{% if is_state(entity, 'on') %}   purple {% endif %}

or

{{ 'purple' if is_state(entity, 'on') }}

Or in @cloudbr34k 's case:

{{ 'mdi:garage-variant-lock' if states(entity) == 'closed' else 'mdi:garage-open-variant' }}

9 Likes

Thank you to Paul for his fantastic work - it has given my HA setup a new lease of life.

I’ve found this thread very helpful so I thought I’d share my own version of the dashboard in case others get inspiration. The room cards are using chips above (for lights) & below (for heating) with a template card in the middle and card-mod hiding the boarders.

Looking forward to seeing how the Mushroom cards evolve - I’d really love a thermostat card as the stock option doesn’t fit the style at all.

9 Likes

As I’m still tinkering around with my dashboard I also want to share my current state and maybe inspire some of you.

  • the greeting changes via template by time of the day and person logged in
  • the birthday is a conditional card only shown if one of my google contacts has it’s birthday and is only shown to me based on state-switch
  • trash info also with a condition if trash is due tomorrow

Behind the person cards and for my car a different other cards for instance changing riger mode and stuff or opening/closing card doors and windows.

Behind every room card is a navigation to set room with lights and meda players and different other stuff.

Icon of HWR (utility room) changes by what appliance is running and secondary info shows “washing”, “drying” or both.

Wohnzimmer has the secondary to show state of my Harmony hub and Kammer would show the state of my vacuum if it’s running.

I’m far from finished but everything works for every day use.

4 Likes

Awesome stuf!!

Would you miind sharing the code for one example “room” ? Like kitchen for example :slight_smile:

1 Like

I’d like an example as well.

1 Like

Sure, no problem. Here’s the Kitchen room card.

You need to install “card-mod” and “Stack In Card” from HACS first.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.dining_lamp_2
        content_info: none
        icon: mdi:table-chair
        use_light_color: true
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: none
      - type: light
        entity: light.couch_lamp
        content_info: none
        icon: mdi:sofa
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: none
        use_light_color: true
      - type: light
        entity: light.kitchen_biglight
        content_info: none
        use_light_color: true
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: none
      - type: light
        entity: light.kitchen_spots
        content_info: none
        icon: mdi:lightbulb-spot
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: none
        use_light_color: true
    alignment: center
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: null
    icon: mdi:knife
    icon_color: green
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
      }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.kitchen
        icon: mdi:thermometer
        icon_color: |-
          {% if states.sensor.kitchen_heating_on.state == "True" %}
            red
          {% endif %}
        content: |-
          {{ state_attr('climate.kitchen', 'current_temperature') }} °C 
          {% if states.sensor.kitchen_heating_on.state == 'True' %}
            | {{ state_attr('climate.kitchen', 'temperature') }} °C
          {% endif %}
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
    alignment: center

7 Likes

Nice dashboard!

Can you share how you managed to get the card show the birthdays? Have been looking for a good guide but in this case my ‘search’ skills are off! I’m reading this " * the birthday is a conditional card only shown if one of my google contacts has it’s birthday and is only shown to me based on state-switch" but somehow it isn’t landing.

A hint in the right direction would also be great.

Is there anyway to remove the circle? image

Thank you! That motivates. :slight_smile:

Of course I can share the code:

type: custom:state-switch
entity: user
default: default
states:
  <YOUR USERNAME HERE>:
    type: conditional
    conditions:
      - entity: <YOUR GOOGLE BIRTHDAY CALENDAR HERE>
        state: 'on'
    card:
      type: custom:mushroom-template-card
      layout: horizontal
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:cake
      primary: '{{ state_attr(''<YOUR GOOGLE BIRTHDAY CALENDAR HERE>'', ''message'') }} <ADDITIONELL TEXT HERE>'

For the conditional showing display of the card only to me - my user and not my wife’s - have a look at lovelace-state-switch and the part that describes user.

To implement your Google calendars look for the official explanation or my some youtube videos you stumble while browsing in addition.

Note: You have to use the android/google function for contacts and put their birthdays in there.

As I’m German the state attribute of my friends birthdays is always " hat Geburtstag" so I added some text to say " hat Geburtstag heute!"

Hope this helps.

2 Likes

Thank You !
very handy / much easier :smiley:

ill second that as well. If Dwain and mushroom combined this is what i should look like.

What’s the best way to display a dropdown? At the moment I am using the default entities card with an input selector and its ‘meh’. I couldnt get the same one to display in a mushroom entity card.

1 Like

Is there a possibility to use this customization

also in the standard cards like “Light card” (i.e. without using the template card)?

Nope, not possible.

1 Like

This is only possible indirectly via the context menu (more-info)

Another question: Is it possible to complete disable showing an icon in the standard cards?

Wow this looks amazing, could you share the code of this wonderful UI?

Beautiful, would you mind sharing this code with me? I’ll get you a beer!

In the light card no, in the entity card yes and of course in the template card.

Maybe send a pull request to Paul on Github for the light card. But you probably will change to a template card anyways because of every other advantage.

The hide options (hide icon, hide state, hide name) will be available for all card in a future release for consistency :slightly_smiling_face: I just need to find how to refactor shared options between card because it’s a lot of duplicate code :sweat_smile:

5 Likes