Ha Mushroom Cards

Works with HACS Mushroom cards, card-mod, and Home Assistant YAML configurations.

Home Assistant Mushroom Cards

Build minimalist, mobile-first Home Assistant dashboards using the Mushroom cards design system.

Overview

Installation: HACS → Frontend → Search "Mushroom"

When to Use This Skill

Use this skill when you need to:

• Build minimalist, mobile-first Home Assistant dashboards with modern design
• Create compact status indicators with chips cards for quick information
• Use template cards with Jinja2 for dynamic content and conditional styling
• Style entity controls with card-mod for custom CSS and animations
• Implement full UI editor support without writing YAML
• Display specialized entity types (light, climate, media player, person) with optimized controls

Do NOT use when:

• You need complex multi-entity cards (use entities card instead)
• Building data-heavy dashboards with graphs and charts (use visualization cards)
• You prefer traditional Home Assistant card styling (use native cards)

Usage

Follow these steps to create Mushroom card dashboards:

1. Install Mushroom via HACS (Frontend category)
2. Select card type based on entity (entity, light, climate, chips)
3. Configure card using UI editor or YAML
4. Add styling with card-mod for custom CSS (optional)
5. Test on mobile for responsive design verification

Mushroom is a complete design system for Home Assistant featuring:

• 13+ specialized card types for entities, controls, and status display
• Minimalist Material Design aesthetic
• Full UI editor support (no YAML required)
• Mobile-first responsive design
• Card-mod integration for advanced styling

Card Selection Guide

Quick Start

Entity Card

type: custom:mushroom-entity-card
entity: sensor.temperature_living_room
name: Living Room
icon: mdi:thermometer
icon_color: red
tap_action:
  action: more-info

Light Card

type: custom:mushroom-light-card
entity: light.bedroom
name: Bedroom Light
show_brightness_control: true
show_color_control: true
use_light_color: true

Climate Card

type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
collapsible_controls: true
hvac_modes:
  - heat_cool
  - cool
  - heat
  - 'off'

Core Cards

1. Entity Card (General Purpose)

type: custom:mushroom-entity-card
entity: sensor.temperature
name: Temperature
icon: mdi:thermometer
icon_color: red
secondary_info: last-changed
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: /lovelace/climate

Icon Colors: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, white, black, disabled

2. Light Card

type: custom:mushroom-light-card
entity: light.living_room
name: Living Room
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
use_light_color: true
collapsible_controls: true
tap_action:
  action: toggle

3. Climate Card

type: custom:mushroom-climate-card
entity: climate.snorlug
name: Snorlug AC
show_temperature_control: true
hvac_modes:
  - cool
  - heat
  - heat_cool
  - fan_only
  - dry
  - 'off'
collapsible_controls: true

4. Cover Card (Blinds/Garage)

type: custom:mushroom-cover-card
entity: cover.garage_door
name: Garage Door
show_position_control: true
show_tilt_position_control: false

5. Fan Card

type: custom:mushroom-fan-card
entity: fan.bedroom
name: Bedroom Fan
show_percentage_control: true
show_oscillate_control: true
collapsible_controls: true

6. Lock Card

type: custom:mushroom-lock-card
entity: lock.front_door
name: Front Door

7. Media Player Card

type: custom:mushroom-media-player-card
entity: media_player.living_room_tv
name: Living Room TV
use_media_info: true
show_volume_level: true
collapsible_controls: true
media_controls:
  - play_pause_stop
  - previous
  - next
volume_controls:
  - volume_mute
  - volume_set

8. Person Card

type: custom:mushroom-person-card
entity: person.john
name: John
use_entity_picture: true
icon: mdi:account

Chips Card (Status Indicators)

The chips card displays compact status indicators and quick actions.

Basic Chips

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.temperature
    icon_color: red
  - type: weather
    entity: weather.home
    show_conditions: true
  - type: action
    icon: mdi:lightbulb
    tap_action:
      action: perform-action
      perform_action: light.turn_off
      data:
        entity_id: all

Chip Types

Entity Chip:

- type: entity
  entity: sensor.temperature
  icon: mdi:thermometer
  icon_color: red
  content_info: state

Weather Chip:

- type: weather
  entity: weather.home
  show_conditions: true
  show_temperature: true

Action Chip:

- type: action
  icon: mdi:home
  icon_color: blue
  tap_action:
    action: navigate
    navigation_path: /lovelace/home

Menu Chip:

- type: menu

Back Chip:

- type: back

Light Chip:

- type: light
  entity: light.bedroom
  use_light_color: true
  content_info: state

Template Chip:

- type: template
  icon: mdi:lightbulb
  content: "{{ states('sensor.lights_on') }} lights"
  icon_color: >-
    {% if states('sensor.lights_on') | int > 0 %}
      orange
    {% else %}
      grey
    {% endif %}
  tap_action:
    action: navigate
    navigation_path: /lovelace/lights

Template Card (Advanced)

Template cards use Jinja2 for dynamic content.

type: custom:mushroom-template-card
primary: "{{ states('sensor.temperature') }}°C"
secondary: "Feels like {{ state_attr('weather.home', 'temperature') }}°C"
icon: mdi:thermometer
icon_color: >-
  {% set temp = states('sensor.temperature') | float %}
  {% if temp < 18 %}
    blue
  {% elif temp < 25 %}
    green
  {% else %}
    red
  {% endif %}
badge_icon: >-
  {% if is_state('binary_sensor.window_open', 'on') %}
    mdi:window-open
  {% endif %}
badge_color: orange
tap_action:
  action: more-info
  entity: sensor.temperature

Template Examples

Lights On Counter:

type: custom:mushroom-template-card
primary: "{{ states('sensor.lights_on') }} Lights On"
secondary: >-
  {% if states('sensor.lights_on') | int == 0 %}
    All lights off
  {% else %}
    {{ states('sensor.lights_on') }} active
  {% endif %}
icon: mdi:lightbulb
icon_color: >-
  {% if states('sensor.lights_on') | int > 0 %}
    amber
  {% else %}
    grey
  {% endif %}

Battery Status:

type: custom:mushroom-template-card
primary: "{{ state_attr('sensor.phone_battery', 'friendly_name') }}"
secondary: "{{ states('sensor.phone_battery') }}%"
icon: >-
  {% set battery = states('sensor.phone_battery') | int %}
  {% if battery > 80 %}
    mdi:battery
  {% elif battery > 50 %}
    mdi:battery-60
  {% elif battery > 20 %}
    mdi:battery-30
  {% else %}
    mdi:battery-alert
  {% endif %}
icon_color: >-
  {% set battery = states('sensor.phone_battery') | int %}
  {% if battery < 20 %}
    red
  {% elif battery < 50 %}
    orange
  {% else %}
    green
  {% endif %}

Title Card (Section Headers)

type: custom:mushroom-title-card
title: Climate Control
subtitle: Temperature and AC settings
alignment: left

Card-Mod Styling

Installation: HACS → Frontend → Search "card-mod"

Card-mod injects custom CSS into Mushroom cards for advanced styling.

Transparent Background

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
    }

Large Icon

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    mushroom-shape-icon {
      --icon-size: 80px;
    }

Custom Font Sizes

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 24px;
      --card-secondary-font-size: 16px;
    }

Conditional Styling

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    :host {
      {% if states('sensor.temperature') | float > 25 %}
        --card-mod-icon-color: red;
      {% elif states('sensor.temperature') | float < 18 %}
        --card-mod-icon-color: blue;
      {% else %}
        --card-mod-icon-color: green;
      {% endif %}
    }

Grid Spanning

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style:
    .: |
      :host {
        grid-column: span 2;  # Take 2 columns
        grid-row: span 1;     # Take 1 row
      }

Animated Cards

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:lightbulb
    content: "{{ states('sensor.lights_on') }}"
card_mod:
  style: |
    ha-card {
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

See examples/examples.md for real-world dashboard examples (climate control, status chips, irrigation) and references/reference.md for best practices and troubleshooting.

Official Documentation

• Mushroom Cards GitHub
• Card-Mod GitHub
• Mushroom Styling Guide (Community)