DOCSEARCHbyAlgolia
Submit Docs

Mushroom Cards

repository·main·Indexed 26 days ago

https://github.com/piitaya/lovelace-mushroom

A collection of highly visual, easy-to-use cards for the Home Assistant Lovelace Dashboard. Mushroom focuses on user experience with a built-in UI editor, Material UI colors, and light/dark theme support. It includes a variety of standard cards (Alarm, Chips, Climate, Cover, Entity, Light, etc.), a Template badge for customizable elements using Home Assistant templating, and support for installation via HACS or manual setup.

Tokens
13.7K
Snippets
19
Records
64
Agent score
86%

What's inside lovelace-mushroom

  1. Set up Mushroom development environment

    main

    To develop Mushroom locally, you can run a Home Assistant demo instance and a development server.

    1. Run Home Assistant Demo (Docker):

    npm run start:hass

    For Windows Command Prompt users: npm run start:hass-cmd. Once started, access it at http://localhost:8123.

    2. Run Development Server: In a separate terminal, install dependencies and start the server:

    npm install
npm start

    The server will start on port 4000.

    3. Build the distribution file: To generate the mushroom.js file in the dist folder:

    npm run build

  2. Configure the Person card

    main

    The Person card allows you to control and monitor a person entity in Home Assistant. You can configure it via the Lovelace UI editor or using YAML.

    Key configuration options include:

    • entity: The person entity to control (Required).
    • icon: A custom icon to display.
    • name: A custom name for the person.
    • layout: The visual layout. Supported values are vertical, horizontal, or the default.
    • fill_container: A boolean to determine if the card should fill its container (useful in grids or specific layouts).
    • primary_info & secondary_info: Controls what information is displayed. Supported values: name, state, last-changed, last-updated, or none.
    • icon_type: Determines if the icon is a standard icon, an entity-picture, or none.
    • tap_action, hold_action, double_tap_action: Home Assistant actions to perform on interaction (defaults to more-info).

  7. Use the Legacy Template Card

    main

    The Legacy Template Card (custom:mushroom-legacy-template-card) is maintained for backward compatibility, specifically for dashboards using card-mod or custom theming that might break with the newer Template Card.

    Most fields support Home Assistant templating. When an entity is defined, you can use the entity variable within your templates to reference it.

    primary: "{{ states(entity) }}"

  8. Install Mushroom manually

    main

    If you are not using HACS, follow these steps to install Mushroom manually:

    1. Download the mushroom.js file from the latest release.
    2. Place the mushroom.js file into your config/www folder.
    3. Register the resource in your Home Assistant Dashboard using one of the following methods:

    Option A: Using the UI

    • Go to Settings → Dashboards.
    • Click the More Options icon (three dots).
    • Select Resources.
    • Click Add Resource.
    • Set URL to /local/mushroom.js.
    • Set Resource type to JavaScript Module. Note: If you don't see the Resources menu, enable Advanced Mode in your User Profile.

    Option B: Using YAML Add the following to your lovelace section:

    resources:
  - url: /local/mushroom.js
    type: module

  9. Configure the Light card

    main

    The Light card allows you to control a light entity. You can configure it via the Lovelace editor or using YAML.

    Key features include:

    • Controlling brightness, color temperature, and RGB color via sliders.
    • Customizing icon type (icon or entity-picture).
    • Using use_light_color to colorize the icon and slider based on the light's actual temperature or color.
    • Collapsing controls when the light is off using collapsible_controls.

  10. Render weather SVG icons in Template Badges

    main

    You can render weather SVG icons by using standard Home Assistant weather entity states as the icon value. Supported values include:

    weather-clear-night
weather-cloudy
weather-fog
weather-lightning
weather-lightning-rainy
weather-partlycloudy
weather-pouring
weather-rainy
weather-hail
weather-snowy
weather-snowy-rainy
weather-sunny
weather-windy
weather-windy-variant

  11. Configure the Cover card

    main

    The Cover card allows you to control a cover entity (such as blinds or shutters). You can configure it via the Lovelace editor or using YAML.

    Key features include:

    • Controlling position via sliders (show_position_control or show_tilt_position_control).
    • Displaying operational buttons (show_buttons_control).
    • Customizing layout (vertical, horizontal, or default) and information display (primary_info, secondary_info).
    • Customizing the icon type (icon or entity-picture).

  12. Configure the Lock card

    main

    The Lock card allows you to control a lock entity. You can configure it via the Lovelace editor or using YAML.

    Required Configuration:

    • entity: The lock entity to control.

    Optional Configuration:

    • icon: Custom icon.
    • name: Custom name.
    • layout: Layout of the card. Supported values: vertical, horizontal, or default.
    • fill_container: Boolean. If true, the card fills the container (useful in grids or specific layouts).
    • primary_info: Info to show as primary info. Options: name, state, last-changed, last-updated, none (Default: name).
    • secondary_info: Info to show as secondary info. Options: name, state, last-changed, last-updated, none (Default: state).
    • icon_type: Type of icon to display. Options: icon, entity-picture, none (Default: icon).
    • tap_action, hold_action, double_tap_action: Home Assistant actions to perform (Default: more-info).