MiniHass MKII UI Dashboard

Share your Projects! Dashboards & Frontend
,
1

MiniHass-Banner-01
MiniHass-Banner-011600×900 134 KB

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!

:link: 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 :slight_smile: 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

Cards
Cards1600×1147 163 KB

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

31 Likes
2

Thanks for sharing this awesome dashboard!

3

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!

4

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

5

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?

6

Mee to! been wondering for a while… :slight_smile:

Really appreciate the effort done on this dashboard

7

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

4 Likes
8

@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.

2 Likes
9

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

10

I use the GUI

Scherm­afbeelding 2023-10-14 om 12.30.39
Scherm­afbeelding 2023-10-14 om 12.30.39868×324 32.1 KB

12

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...
1 Like
15

Can advise on how to get these cards?

Screenshot 2023-10-14 at 12.28.09
Screenshot 2023-10-14 at 12.28.09860×412 98.9 KB

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

Screenshot 2023-10-14 at 12.18.50
Screenshot 2023-10-14 at 12.18.501052×276 5.89 KB

16

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 :slight_smile:

1 Like
17

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

Screenshot 2023-10-14 at 12.57.18
Screenshot 2023-10-14 at 12.57.181006×234 6.84 KB

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

19

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

20

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

1 Like
21

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

1 Like
22

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

2 Likes
23

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

1 Like
24

My man, what a legend.