📱 Mobile First Dashboard - A minimalist and user-friendly UI for your dashboard

Share your Projects! Dashboards & Frontend
, , , ,
#1

Home Assistant - Mobile First Dashboard

A minimalist and user-friendly design, combined with an mobile first approach for the Home Assistant dashboard.

Stars Last commit Reddit Profile Buy me a beer

About three years ago, a friend introduced me to Home Assistant. I was drawn to the idea and its open-source nature, so I purchased a Raspberry Pi 4 and quickly became enamored with the platform.

I’m now happy to share my personal setup with the community and hope it inspires you.

Screenshots and features

Header and footer
Header and footer1920×1080 221 KB

Main dashboard
Main dashboard1920×1080 308 KB

More dashboards
More dashboards1920×1080 286 KB

Security
Security1920×1080 396 KB

Animated widgets

Installation

There is no easy installation process, as this is my personal setup uploaded as is.

But here is a step-by-step guide that will show you where to start.

Installation guide

Troubleshooting

If you have specific questions or if you have noticed any error in this guide, feel free to post a comment here and I will try to answer as soon as possible.

Thank you all for your support and motivation!

43 Likes
#2

Realy nice work! Congratulations. I will definetly have a closer look into it.

2 Likes
#3

Thanks! If you have questions I’m here!

#4

I played around with it a bit yesterday and I really like your dashboard. So much so, in fact, that I think I’m going to adapt it just a little bit to make it my default dashboard :slight_smile: .

One thing I noticed while trying it out yesterday, and it bothered me a bit, was that I often activated the light slider by mistake when scrolling down. How do you deal with this? Or is it just a matter of getting used to it?

I’ll also have a look at whether I can replace your code here and there with templates. Unfortunately, the code of your lovelace.yaml is repetitive in many places and this makes the file with over 6000 lines of config code very confusing :woozy_face: .

In any case, many thanks and best regards to Belgium (if I have taken the location from the code correctly :wink: )

2 Likes
#5

Really cool ideas in this setup. Thanks for sharing!

1 Like
#6

Thanks again, glad to see someone trying to figure out my code. For the sliders it’s weird that you have this issue, I’ve never triggered my lights by mistake with those.

And I agree that my code really need a big clean up, I’m using the UI but mostly in YAML mode, it’s easier to maintain for me. I’ve just copied and pasted all the YAML in that lovelace.yaml for GitHub but I don’t use it (for now).

And yes I’m from Belgium, I thought I had cleaned my code from all that kind of informations :joy:

#7

Thanks and you’re welcome, glad to share! :smiley:

#8

I played around a bit with .yaml anchors. Especially for the completely repetitive header areas:
homeassistant/lovelace.yaml at main · CM000n/homeassistant (github.com)

This seems to work wonderfully and makes the whole thing a bit clearer.
Again: Thanks for your great work and inspiration!

1 Like
#9

This looks like how you define decluttering templates, but it’s not the same is it? Does it require a download from HACS?

@Cloos there are some really nice ideas in this setup, thanks for sharing! I’m currently thinking about how to build a dedicated good-looking tablet layout, like with a side menu and stuff, but I find it much harder than a phone layout; are you planning on building one (in this style) as well?

1 Like
#10

No, these are just .yaml anchors and aliases that have nothing to do with Home Assistant itself, but are simply part of the .yaml specification:

1 Like
#11

Thanks! I’m using this dashboard for my tablet as well, take a look at this post, it’s an old layout but my new one is even better on it (more info with less scrolling), so I’m not planning to do a landscape view of it.

2 Likes
#12

I will take a closer look at this, thanks! I will probably re-wright a bunch of it when I got more time, but I want to focus on re-wrighting my automations first then publish them on GitHub as well.

2 Likes
#13

Nice work indeed!
Dumb question what is the !important doing in the css config? Like in here “margin: -16px !important;”

#14

They are here to override the initial CSS and make sure this line is used instead.

1 Like
#15

Hey Cloos,

Nice mobile dashboard. I copied your code for trying to have the same person card with picture like you Quentin card but it don’t look like yours.

#16

You also need to install the Noctis theme from my repo, it’s a modified one, then tell me if it’s working for you.

#17

Nice work.
How you added QR code ?

#18

amazing!

  1. how can I create this addition to the current dashboards I have?
  2. you have to customize it to tablet ui (;
#19

Try https://qifi.org/

#20

Loving it. Keen to know how you have used your photo in the person card on the home page? I referenced icon:/local/image.jpg and it is not working