Custom element doesn't exist: hui-vertical-stack-card -> How to use hui-element

[Hyxion14 (Daniel)]

Hello, I am designing a card for a room thermostat, but everything was going well, until I got this error and I don’t know how to solve it:

Someone could tell me the reason for the error.

The code of my card is:

type: custom:hui-vertical-stack-card
cards:
  - type: custom:hui-horizontal-stack-card
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.salon_temp
        name: Salón
        icon_type: none
        fill_container: false
        tap_action:
          action: navigate
          navigation_path: SALON
        card_mod:
          style: |
            ha-card {
              background-color: rgba(0,0,0,0);
              box-shadow: none;
              border-style: hidden;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            tap_action:
              action: call-service
              service: switch.toggle
              target:
                entity_id: switch.suelo_salon
            icon: mdi:heating-coil
        alignment: end
  - type: custom:mushroom-number-card
    entity: number.set_salon_temp
    name: Consigna
    icon: mdi:thermometer
    display_mode: slider
    card_mod:
      style: |
        ha-card {
          background-color: rgba(0,0,0,0);
          box-shadow: none;
          border-style: hidden;
        }
  - graph: line
    type: sensor
    entity: sensor.salon_temp
    detail: 1
    name: Temperatura
    card_mod:
      style: |
        ha-card {
          background-color: rgba(0,0,0,0);
          box-shadow: none;
          border-style: hidden;
        }

Thanks for your help

[Ildar_Gabdullin]

@Hyxion14

custom:hui-horizontal-stack-card

The code you are trying to use is very old.
Currently there are no such cards.
Go to custom:hui-element card GitHub repo for info.

Besides, I am not sure that a person who wrote this code did it correct. These cards (currently named hui-element) are used to add a stack where a stack cannot be added - and “paste a stack into Entities card” seems to be the only use-case. In other cases a standard stack could be sufficient.

[Hyxion14 (Daniel)]

@Ildar_Gabdullin

Besides, I am not sure that a person who wrote this code did it correct. These cards (currently named hui-element) are used to add a stack where a stack cannot be added - and “paste a stack into Entities card” seems to be the only use-case. In other cases a standard stack could be sufficient.

Honestly I am new to this and I would like to understand how to do this correctly, because in the end I am cutting and pasting but I don’t really understand the concept, based on your experience, where do you recommend me to go to read information about this and learn?

Thank you.

[Ildar_Gabdullin]

As usual - hui-element Github repo…

Some synthetic examples:

1. Markdown, Glance, Entities, Stack - inside Entities:

code

type: entities
entities:
  - sun.sun
  - type: custom:hui-element
    card_type: markdown
    content: markdown
  - type: custom:hui-element
    card_type: entities
    title: entities
    entities:
      - sun.sun
      - sun.sun
  - type: custom:hui-element
    card_type: glance
    title: glance
    entities:
      - sun.sun
      - sun.sun
  - type: custom:hui-element
    card_type: horizontal-stack
    title: stack
    cards:
      - type: entities
        entities:
          - sun.sun
          - sun.sun
      - type: glance
        entities:
          - sun.sun
          - sun.sun

2. Entity rows inside a stack:

code

type: vertical-stack
cards:
  - type: custom:hui-element
    row_type: section
    label: section
  - type: custom:hui-element
    row_type: sensor-entity
    entity: input_number.test_number
    name: sensor-entity
  - type: custom:hui-element
    row_type: number-entity
    entity: input_number.test_number
    name: number-entity (slider)
  - type: custom:hui-element
    row_type: number-entity
    entity: input_number.test_number_2
    name: number-entity (box)
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: toggle-entity
  - type: custom:hui-element
    row_type: input-select-entity
    entity: input_select.test_value
    name: input-select-entity
  - type: custom:hui-element
    row_type: input-text-entity
    entity: input_text.test_text
    name: input-text-entity
  - type: custom:hui-element
    row_type: weather-entity
    entity: weather.home_met
    name: weather-entity
  - type: custom:hui-element
    row_type: buttons
    entities:
      - entity: sun.sun
        show_name: true
      - entity: sun.sun
        show_name: true
      - entity: sun.sun
        show_name: true

3. (w/o code) Any standard card or entity row inside Picture elements card. The card only accepts so called “elements” & custom cards; to paste a standard card (or an entity row) - you need to wrap it into hui-element.

4. (w/o code) (advanced) Inside a template for a “custom:decluttering-card”. The template accepts a CARD - but assume you need to create a template for standard entity row (like a slider) - then wrap it into hui-element.