name: ha-mushroom-cards description: | Creates minimalist, mobile-first Home Assistant dashboards using Mushroom cards (13+ types) including entity, light, climate, chips, and template cards with card-mod styling support. Use when building modern HA dashboards, creating compact mobile interfaces, styling entity cards, using chips for status indicators, or combining Mushroom with card-mod for custom CSS.

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:

Install Mushroom via HACS (Frontend category)
Select card type based on entity (entity, light, climate, chips)
Configure card using UI editor or YAML
Add styling with card-mod for custom CSS (optional)
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

Card Type	Purpose	Best For
`mushroom-entity-card`	General entity display	Sensors, switches, any entity
`mushroom-light-card`	Light control	Brightness, color picker
`mushroom-climate-card`	HVAC control	Temperature, mode, fan
`mushroom-cover-card`	Blinds/garage	Position, tilt control
`mushroom-fan-card`	Fan control	Speed, oscillation
`mushroom-lock-card`	Lock control	Lock/unlock with confirmation
`mushroom-media-player-card`	Media control	Playback, volume, source
`mushroom-person-card`	Person tracking	Location, picture
`mushroom-chips-card`	Compact status indicators	Quick status/actions
`mushroom-template-card`	Custom templating	Jinja2 templates, dynamic content
`mushroom-title-card`	Section headers	View organization

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.

Ha Mushroom Cards

Skill Details

Repository Files