MiniHass MKII UI Dashboard

fredrikpersson92 · October 12, 2023, 3:14pm

Hi and welcome to MiniHass MKII, my second version of this minimalistic, rounded, and colorful dashboard UI for Home Assistant.
I was fortunate to have this featured in Everything Smart Home’s Youtube video and there have since been many requests to share the cards. So here it goes!

First off, here is my Github with most of the card:

How do I install it?

This UI does use some custom components that will need to be downloaded from HACS, but other than that, it completely relies on your ability to add lines of YAML code to either your GUI Lovelace dashboard or through the backend, using tools such as Visual Studio Code. The latter is much easier and gives you more control. However, if you already have a dashboard in the GUI editor, then you can add any of the cards there by using the manual card and pasting the code. Please note that the cards rely on templates though, which will need to be added in the Raw Config Editor, or in your Lovelace config. You can read more on that here.

Ps. If using a YAML dashboard, I recommend creating a folder for all templates and referencing that in your Lovelace configuration. ('m not sure if this also can be done in the GUI)

button_card_templates: !include_dir_merge_named "/config/ui_lovelace_minihass/templates/"

Theme and font and cards

This dashboard is 90% made of custom Button Card. Follow the instructions in the link to install it. You will also need to add my theme to utilize the card’s full potential, including light and dark modes. You can of course edit the values in the theme to suit your style I also opted for the font Montserrat from Google Fonts. You can install the font by adding the line below to your configuration.yaml, or as a resource to your GUI dashboard.

  lovelace:
    mode: yaml
    resources:
    - url: /www/community/button-card/button-card.js
      type: module
    - url: https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
      type: css

Included cards

I will keep adding new cards gradually. For now, these are the available card templates you can copy and use. For each card, there is a template (multiple for some) and an example of the actual code to put in your dashboard.

Settings Card
Section Title Card
Navigate Card
Light Card
Garbage Collection Card
Camera Card
Security Card
Alarm(s) Card

*Please note that this is very much a work in progress and many things are not perfect. Especially the backend theme

aglogger · October 13, 2023, 7:09pm

Thanks for sharing this awesome dashboard!

fedcuo · October 13, 2023, 8:35pm

Hi @fredrikpersson92, I really loved your dashboard when I’ve seen on youtube!
Many thanks to share it with us.

Just a question: I can’t find source code on this page, even on HACS or GitHub. Will you share it in the future, other than the repository of custom Button card (from which you’ve started)?

Regards!

Tommo-101 · October 13, 2023, 9:05pm

Amazing design. Can’t wait to see more cards develop!

CM000n · October 13, 2023, 9:47pm

Hello, that looks fantastic! I can’t wait to try out your designs for myself sometime.
But somehow I can’t find anywhere in your post a link to your GitHub repo with the templates. Am I missing something here?

drashish87 · October 13, 2023, 10:06pm

Mee to! been wondering for a while…

Really appreciate the effort done on this dashboard

Tommo-101 · October 13, 2023, 10:47pm

@fredrikpersson92 - wasn’t included… GitHub - fredrikpersson92/minihass: MiniHass UI Dashboard for Home Assistant

RienduPre · October 14, 2023, 9:26am

@fredrikpersson92 I like your dashboard approach

But I need some guidance to install this, preferable a step by step setup
For example where do I put the neccasarry files and what do I have to change in the configuration.yaml or other yaml files.

Forgive me my ignorance, but this dashbard is the first one which fits my needs.

Thanks in advance.

fredrikpersson92 · October 14, 2023, 10:22am

Hi, are you using the standard GUI editor or creating your dhasboard from scrath using only YAML?

RienduPre · October 14, 2023, 10:31am

I use the GUI

fredrikpersson92 · October 14, 2023, 11:04am

cool, open up the Raw configuration Editor in the top right corner. Scroll down to the bottom and add the line:

button_card_templates:

below that you add the card templates. So for example:

views:
  - title: MiniHass GUI
    path: minihass-gui
    badges: []
    cards:
      - type: custom:button-card
        entity: input_boolean.dummy_scene3
        template:
          - custom_card_light
        variables:
          light_name: Windows
          light_label: Living Rooms
          
button_card_templates:
  custom_card_light:
    variables:
      light_name: null
      light_label: null
    entity: '[[[ return entity.entity_id ]]]'
etc etc etc...

drashish87 · October 14, 2023, 11:29am

Can advise on how to get these cards?

Also, I am unable to the bulb icon in the light card unlike in your pics?

fredrikpersson92 · October 14, 2023, 11:45am

For the icons you need to use Fontawesome

Which cards did you mean, the top header? I have not shared those yet so you’l have to be patient

drashish87 · October 14, 2023, 11:58am

Thank you, I got the bulb icon, but not sure how to remove the slider icon now.

Patience is going to be tough, I am trying to set this up since last 4 hours

fredrikpersson92 · October 14, 2023, 1:11pm

No problem, just change from show_icon: true to show_icon:false in the template

drashish87 · October 14, 2023, 1:43pm

Thank you, that solved it. Your help is much appreciated

smilingcrocodile · October 14, 2023, 4:57pm

This is awesome, thank you so much for sharing @fredrikpersson92 !

Rtho · October 15, 2023, 12:59am

Awesome dashboard Fredrik! Thanks for sharing. Would love if you could share your template for the circle header buttons, they look amazing

rodrigojoszt · October 17, 2023, 4:47pm

Thank you for amazing Dashboard. I would really like the weather and scenes card. Thanks!!!

Siroguh · October 17, 2023, 6:34pm

My man, what a legend.