My Custom Cards for Minimalist UI

I thought I would share my custom cards, I would like your feedback on these.

The dev branch will be used for the bleeding edge and could have bugs, but if you find any issues in the master or dev brach please submit a git issue, and I take a look.

I did these for myself, but I hope you like.

guides are here


v2.0 beta1of my Custom Room card is up on my github, there are few breaking changes to bring inline with minimalist docs,

the breaking changes are:

  • use ulm_custom_card_andyblac_room_color to set the room colour, instead on using ulm templates, this now lets you use theme colours ie the color in themes file of --color-red can be used as ulm_custom_card_andyblac_room_color: red
  • same for entity on state colours, use ulm_custom_card_andyblac_room_icon_color_on
  • room sensor icon colours, will now default to that of ulm_custom_card_andyblac_room_color but can be over ridden by using ulm_custom_card_andyblac_room_sensor_color or ulm_custom_card_andyblac_room_sensor_color_on

these changes make using icon animation templates (coming soon) alot easier.

hers an exmaple.

# Bathroom
  - type: custom:button-card
      - custom_card_andyblac_room
    name: "Bathroom"
    icon: mdi:shower-head
      action: navigate
      navigation_path: bathroom
      ulm_custom_card_andyblac_room_color: blue
      sensor_label_1: sensor.bathroom_humidity_sensor_temperature
      sensor_label_2: sensor.bathroom_humidity_sensor_humidity
      sensor_label_3: sensor.bathroom_humidity_derivative
        entity_id: input_boolean.hot_water
          action: toggle
        entity_id: light.bathroom_light
        ulm_custom_card_andyblac_room_icon_color_on: yellow
        entity_id: fan.bathroom_extractor
        ulm_custom_card_andyblac_room_icon_color_on: blue


1 Like

so these are all templates for button card ? where do the template files go ? (Not sure I’ve seen something this advanced :slight_smile: )


they are custom cards for the Minimalist UI integration, you can install that via HACS, see here for more info.

I will be doing a wiki soon, on how start start from scratch.

1 Like

heres an example of an animation template

Screen Recording 2023-09-08 at 18.45.36-2Screen Recording 2023-09-08 at 21.55.13

shower icon is from the state of my opentherm gateway when hot water is running, the fan is from the switch from the switch.


I have tweaked the “Person Card” moved battery position, what you guy’s think ?

Screenshot 2023-09-10 at 18.13.52


I prefer the other way personally - the real estate at the bottom has a clean look, but I feel the other approach looked generally better.

how about this ?



I have also fixed, and cleanup the text location, it was all over in chrome etc.

1 Like

Just found your custom card and really like it to simplify my home dashboard. It’s really dense and conveys a lot of information in a simple way. However, I’ve been reading through the original long lovelace-ui-minimalist thread with your comments and don’t see how you layout your destination paths. In other words, what does your “Front Garden” page look like when you tap it? How do you control sliders for dimmers, etc? I’m just curious how you’ve laid them out visually. Thanks.

It’s just a normal Lovelace YAML.

Front Garden

and Lounge as another example Lounge

my ui-lovelace.yaml

button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "Main Dashboard"

  - !include main/home.yaml
  - !include main/security.yaml
  - !include main/heating.yaml
  - !include main/lights.yaml
  - !include main/sockets.yaml
  - !include main/doors.yaml
  - !include main/motion-sensors.yaml
  - !include main/batteries.yaml
  - !include main/rooms/front-garden.yaml
  - !include main/rooms/back-garden.yaml
  - !include main/rooms/garage.yaml
  - !include main/rooms/kitchen.yaml
  - !include main/rooms/bathroom.yaml
  - !include main/rooms/lounge.yaml
  - !include main/rooms/media-room.yaml
  - !include main/rooms/hall.yaml
  - !include main/rooms/landing.yaml
  - !include main/rooms/office.yaml
  - !include main/rooms/andys-bedroom.yaml
  - !include main/rooms/mums-bedroom.yaml

@afxok if you want i can post my full dashboard files.

1 Like

Ok, interesting. I was wondering how you carried through the UX aspect. Do you use primarily desktop or mobile for your interaction?

both my code is dynamic on iphone.

1 Like

Yes, I’m just getting started with UI-Minimalist so your dashboard files would be a huge help to get the dynamic layouts working right. Thanks!

here you go

Awesome, thanks!

There’s a reference to a custom card “custom_card_andyblac_count_info” in one of your files. Is the custom card “custom_card_andyblac_count_info” on your git repository a new version of that?

Nevermind, I looked closed and could see that it wasn’t and I found “custom_card_andyblac_count_info” in your dev branch.

yup just reamed status icon only to status info seemed to make more sense as it wasn’t just icon only lol.