Clean Light React Dashboard

Share your Projects!
1

I wanted to make a dashboard that I later can use on my wall-tablet. Lovelace wasn’t customizable enough for me, so I made a custom panel with React. Figured out how to do it thanks to @william57m post about his dashboard.

So far I’ve only made the main dashboard, and I can only turn devices on/off. I’m also missing some cards due to having not so many sensors atm. So next part of the project is fixing modals, the sub-section pages and then finally revisit the color palette and icons. I kept the colors simple for now, but will probably make different themes that I can use on different devices. :slightly_smiling_face:

A lot of work ahead, don’t think I’ll have time to continue this until my X-mas break. I can update after phase 2.

If you have any ideas please share! :grin:

Skjermbilde 2021-11-22 kl. 01.30.59
Skjermbilde 2021-11-22 kl. 01.30.591920×1051 81.1 KB

13 Likes
2

Are you going to share?

3

yes I’ll post it on github when it’s finished! :blush:

4

Hey! Can´t belive you are not getting more responses. This look very pretty and promising.
In fact, i was so inspired i started to do my own take on this but with layout card and custom button :wink:
Have some more work to do but it is a start i guess :slight_smile:

5

Nice, but again no code.

1 Like
6

Thank you! I’m glad you like it so far :smiley: Nice this looks great! and it’s all in lovelace??

7

Yep all lovelace using custom layout card and custom button card + card-mod. Thats it. I am curious, why do you prefer react over lovelace ?

Oh and some progress

Skärmbild 2021-12-01 082004
Skärmbild 2021-12-01 0820041894×1065 209 KB

2 Likes
8

Nice! I’m glad you’re making an option for those who want to use lovelace! that’s very cool :slight_smile: I just find lovelace a bit wonky, the ui is not so user friendly and the ability to customize the themes seems to have been made much harder than it needs to be :sweat_smile: So for me it will be easier, and less work to make it in react, then i’ll have full control and not be dependent on a lot of hacs cards etc.

9

Any progress or will you start working now ? :slight_smile:

My dashboard took a different turn but came out pretty sweet i must say, only portrait mode for now.
It has some inspiration still from your concept.

Skärmbild 2021-12-23 124453
Skärmbild 2021-12-23 124453823×1060 210 KB

1 Like
10

This looks really nice, can’t wait to see more!

11

Nice! I took a break over Christmas, but will continue here and there. I’m also renovating my house so not every thing I get to test atm. Nice results! I’d like a portrait mode as well! Funny how everytime I see a screenshot it’s always in Swedish or Norwegian, haha, Scandinavians unite!

12

I love this. Do you mind sharing the yaml?

13

Hi, could you tell me which card you are using?

14

Hi @Celly,

I am very interested in your project. :smiley:
Did you already post it to Github?

1 Like
15

Hi Daniel, I like this dashboard very much. Would you like to share your config?

3 Likes
16

Hello @Celly ,

Very nice dashboard!
Can you share your yaml file? Or you GitHub project?

2 Likes
17

Hi Daniel I love yourwork. I’m new to home assistant yaml language I have been looking for a way to have a dashboard like yours but I don’t know where to start from. Am using the default home assistant UI but cards fill the whole space and they look bad. And I don’t know how to create a side bar with that digital clock, plus I want also to include my Google calendar events then l need a one month full calendar. Please help.

1 Like
18

hi bro how did you do this can you explain for us