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

71n0 · February 6, 2022, 10:22am

The 2022.2.2 HA update seems to have some problems with the mushroom.yaml theme.
I had to remove it again to get HA normally started.

Murry · February 6, 2022, 11:53am

Great work - fresh HA user here and this is definitely the easiest way for a noob to get the looks of the Minimalist UI without digging into YAMLs like crazy constantly.

Maybe that’s a pretty basic question and I apologise for it - but how did you manage to have those titles of sections in the demo image? Eg. Lights, Devices and so on.

piitaya · February 6, 2022, 12:43pm

For the demo, I used vertical-stack card and grid card to compose the interface. Title can be set in yaml with the title property in vertical-stack and grid card.

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: weather
        entity: weather.lille
        show_conditions: true
        show_temperature: true
      - type: entity
        entity: light.kitchen_lights
        icon_color: orange
        icon: mdi:ceiling-light
      - type: entity
        entity: alarm_control_panel.alarm_panel_1
        icon_color: blue-grey
        icon: mdi:shield-half-full
  - type: grid
    cards:
      - type: custom:mushroom-person-card
        entity: person.anne_therese
        use_entity_picture: true
        vertical: true
      - type: custom:mushroom-person-card
        entity: device_tracker.demo_paulus
        vertical: true
      - type: custom:mushroom-entity-card
        entity: binary_sensor.updater
        vertical: true
    square: false
    columns: 3
  - type: grid
    title: Lights
    cards:
      - type: custom:mushroom-light-card
        entity: light.kitchen_lights
        icon: mdi:ceiling-light-multiple
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.bed_light
        icon: mdi:lamps
        show_color_temp_control: true
    columns: 2
    square: false
  - type: grid
    title: Devices
    cards:
      - type: custom:mushroom-fan-card
        entity: fan.living_room_fan
        show_percentage_control: true
        show_oscillate_control: true
      - type: custom:mushroom-alarm-control-panel-card
        entity: alarm_control_panel.alarm_panel_1
        states:
          - armed_home
          - armed_away
        name: Alarm
      - type: custom:mushroom-entity-card
        entity: switch.ac
        icon: mdi:light-switch
        name: Switch
      - type: custom:mushroom-entity-card
        entity: sensor.power_consumption
        icon_color: purple
        icon: mdi:transmission-tower
    columns: 2
    square: false

The title card will be added in the next release to simplify the usage of texts between group of cards and will support templating if you want dynamic texts link to the pull request

To clarify the difference with Minimalist :

I built Mushroom with a friend. We are both typescript developers so I was easier to us to build custom cards from scratch instead of customizing the button-card. Adding the GUI support to Minimalist is technically impossible with the current implementation so we prefer to built another project.

Minimalist

button-card based, build with button-card template. There is a big community : a discord, a forum thread, lot of custom cards, etc…
yaml only (because it’s based on button-card)
for users that want deep customization

Mushroom

lit-element based, built with typescript and css
GUI support (editor, icon picker, color picker, preview, etc…) but you can use yaml if you want
for users that want plug and play cards

Mushroom will never allow deep customization like Minimalist because it’s not the goal of the project. We just want to offer HA users an easy way to build a beautiful dashboard.

Smarinof · February 6, 2022, 1:57pm

Wow !!!
That is really awesome.
Is there anyway to change the height of the light sliders?
I’m using it to do a mobile layout and I’d love to be able to make it a bit more compact.

Thanks for the hard work!!!

fastender · February 6, 2022, 8:20pm

WOW!

I congratulate you both for the great work. I think the path you have taken is the right one, especially because it gives the individual more time to concentrate on other more important things (e.g. the automations in the house). I also like the offensive restriction to only a few items. I like the basic idea and am very curious about the further development.

Some suggestions (if they could fit in with the basic concept):

Would it be possible to use SVG icons?
Is it possible to change the font?
Simple CSS animations such as fading, turning when the buttons are pressed.

p.deelen · February 6, 2022, 10:02pm

First off all, thanks for this amazing project! This is so much easier to make a nice looking dashboard!
Is it possible to combine the custum cards with a entitiy-filter card? That would be awesome. Thanks for your work.

AlmostSerious · February 6, 2022, 10:21pm

Super nice Love it!
Is it somehow possible to use any of these cards to get one of those awesome sliders for a custom input_number helper?

mikeg1130 · February 7, 2022, 12:04am

Just to add to the VERY enthusiastic thank you and follow up feature request: Thank You! I am loving it!

Would it be possible to integrate the icon selector from the core UI card editors?

Neekster · February 7, 2022, 3:11am

I’ve been using the custom:text-divider-row card in conjunction with these buttons to create something pretty awesome. This is an amazing set of cards. Keep up the great work!

pedolsky · February 7, 2022, 6:05am

The icon selector is part of it or do you mean something else?

pedolsky · February 7, 2022, 6:09am

You can use card-mod:


type: custom:mushroom-light-card
entity: light.my_light
card_mod:
  style: |
    ha-card { font-family: 'Lucida Console' }

mikeg1130 · February 7, 2022, 6:19am

I just went back through, and realized that only the template chip and card don’t have the icon picker. But I guess that is by design, so templates can be used in those fields. Sooo, ignore my please!

Thanks again for the excellent work. My wife was just telling me the other day that my dashboards could be better!

sparkydave · February 7, 2022, 6:22am

This looks really cool. Looking forward to seeing future cards added.

pedolsky · February 7, 2022, 6:31am

It’s all good, no problem. I recently tried the new iif function in mushroom template card, works like a charm:


icon: '{{ is_state(''person.pedolsky'', ''home'') | iif(''mdi:heart'', ''mdi:sleep'') }}'
icon_color: '{{ is_state(''person.pedolsky'', ''home'') | iif(''pink'', ''grey'') }}'

hyboi1 · February 7, 2022, 7:01am

Great work! Slowly updating all my cards!
I did come across an issue with the fan card. As the steps of my fan are every 20%, I had to choose the exact percent otherwise the speed wouldn’t trigger.

piitaya · February 7, 2022, 3:57pm

Which integration do you use for your fan ?

Posreg · February 8, 2022, 7:10am

I agree with the above comments, this is a game changer superb stuff guys!

I understand the concept of not overcomplicating this, but in the future releases can we exxpect like confirmation text option for the tap_action or simple color_picker for the RGB lights :)?

pedolsky · February 8, 2022, 7:46am

Both is already possible:


type: custom:mushroom-light-card
entity: light.hue_iris
show_brightness_control: true
show_color_temp_control: true
tap_action:
  confirmation: true
  action: toggle
hold_action:
  action: more-info
vertical: true

Posreg · February 8, 2022, 7:55am

thank you, indeed confirmation is working but without allowing to set own text
like:

tap_action:
  confirmation: true
    text: xyz
  action: toggle

still love your work and waiting for new releases

pedolsky · February 8, 2022, 8:30am

Because of ~~your indentation~~ the word ‘true’. Use it as follows:


tap_action:
  confirmation:
    text: really????
  action: toggle

P.S.: It’s not my work. I’m only a fan.