Loading...
Loading...
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.
npx skill4agent add dawiddutoit/custom-claude ha-mushroom-cards| Card Type | Purpose | Best For |
|---|---|---|
| General entity display | Sensors, switches, any entity |
| Light control | Brightness, color picker |
| HVAC control | Temperature, mode, fan |
| Blinds/garage | Position, tilt control |
| Fan control | Speed, oscillation |
| Lock control | Lock/unlock with confirmation |
| Media control | Playback, volume, source |
| Person tracking | Location, picture |
| Compact status indicators | Quick status/actions |
| Custom templating | Jinja2 templates, dynamic content |
| Section headers | View organization |
type: custom:mushroom-entity-card
entity: sensor.temperature_living_room
name: Living Room
icon: mdi:thermometer
icon_color: red
tap_action:
action: more-infotype: custom:mushroom-light-card
entity: light.bedroom
name: Bedroom Light
show_brightness_control: true
show_color_control: true
use_light_color: truetype: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
collapsible_controls: true
hvac_modes:
- heat_cool
- cool
- heat
- 'off'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/climatetype: 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: toggletype: 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: truetype: custom:mushroom-cover-card
entity: cover.garage_door
name: Garage Door
show_position_control: true
show_tilt_position_control: falsetype: custom:mushroom-fan-card
entity: fan.bedroom
name: Bedroom Fan
show_percentage_control: true
show_oscillate_control: true
collapsible_controls: truetype: custom:mushroom-lock-card
entity: lock.front_door
name: Front Doortype: 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_settype: custom:mushroom-person-card
entity: person.john
name: John
use_entity_picture: true
icon: mdi:accounttype: 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- type: entity
entity: sensor.temperature
icon: mdi:thermometer
icon_color: red
content_info: state- type: weather
entity: weather.home
show_conditions: true
show_temperature: true- type: action
icon: mdi:home
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace/home- type: menu- type: back- type: light
entity: light.bedroom
use_light_color: true
content_info: state- 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/lightstype: 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.temperaturetype: 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 %}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 %}type: custom:mushroom-title-card
title: Climate Control
subtitle: Temperature and AC settings
alignment: lefttype: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
style: |
ha-card {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
}type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
style: |
mushroom-shape-icon {
--icon-size: 80px;
}type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
style: |
ha-card {
--card-primary-font-size: 24px;
--card-secondary-font-size: 16px;
}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 %}
}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
}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; }
}examples/examples.mdreferences/reference.md