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

Home Assistant - Mobile First Dashboard

This project is no longer maintained and I’ve stopped using it.

But I’m working a lot on Bubble Card, come take a look! :beers:

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

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

Thank you all for your support and motivation!

49 Likes

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

3 Likes

Thanks! If you have questions I’m here!

1 Like

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

Really cool ideas in this setup. Thanks for sharing!

1 Like

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:

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

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

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

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

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

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

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

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

1 Like

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.

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.

Nice work.
How you added QR code ?

amazing!

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

Try https://qifi.org/

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