Minimalistic Home Assistant Dashboard with Custom Cards

Sharn25 · April 8, 2023, 1:02pm

Hello everyone,

I wanted to share my minimalistic dashboard that I’m using from past few weeks The dashboard consists of various cards that display information about active devices, person status, and other important details.

The Code is available on the below GitHub link:
HA Custom Cards

Room Cards
Light Cards
Person Cards
Media Player Card
Switch Cards
Device Cards
Usage Cards
Utilization Card
Storage Cards
Information Cards

I hope this dashboard will be useful to other Home Assistant users who want a clean and functional interface for their smart home devices.

alexandrechoske · April 29, 2023, 7:18pm

any way to install it via hacs?

edit: I figured out how to use, no need to install via hacs, I only have one doubt about the icons, the “ssb” icons need to be installed some package to work?

Sharn25 · June 5, 2023, 5:55am

Copy this module to config folder and add it under resources in HA.

github.com

sharn25/HA-Custom_Cards/blob/b74dc128da49da1cafad0c747be04c822717fc1c/custom_icon.js

 var icons = {
        "google-mini":[0,96,960,960,"M300 646q12 0 21-9t9-21q0-12-9-21t-21-9q-12 0-21 9t-9 21q0 12 9 21t21 9Zm120 0q12 0 21-9t9-21q0-12-9-21t-21-9q-12 0-21 9t-9 21q0 12 9 21t21 9Zm120 0q12 0 21-9t9-21q0-12-9-21t-21-9q-12 0-21 9t-9 21q0 12 9 21t21 9Zm120 0q12 0 21-9t9-21q0-12-9-21t-21-9q-12 0-21 9t-9 21q0 12 9 21t21 9ZM480 976q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120 616q0-145 97-246t233-112V126q0-12.75 8.675-21.375Q467.351 96 480.175 96 493 96 501.5 104.625T510 126v132q136 11 233 112t97 246q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480 976Zm0-60q125 0 212.5-87.5T780 616q0-125-87.5-212.5T480 316q-125 0-212.5 87.5T180 616q0 125 87.5 212.5T480 916Zm0-300Z"],
        "cash":[0,96,960,960,"M540 636q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM220 776q-24.75 0-42.375-17.625T160 716V316q0-24.75 17.625-42.375T220 256h640q24.75 0 42.375 17.625T920 316v400q0 24.75-17.625 42.375T860 776H220Zm100-60h440q0-42 29-71t71-29V416q-42 0-71-29t-29-71H320q0 42-29 71t-71 29v200q42 0 71 29t29 71Zm480 180H100q-24.75 0-42.375-17.625T40 836V376h60v460h700v60ZM220 716V316v400Z"],
        "card":[0,96,960,960,"M880 316v520q0 24-18 42t-42 18H140q-24 0-42-18t-18-42V316q0-24 18-42t42-18h680q24 0 42 18t18 42ZM140 425h680V316H140v109Zm0 129v282h680V554H140Zm0 282V316v520Z"],
        "iphone":[0,0,128,128,"M39,0C56.723-.119,78.477-1.131,93,2c4.343,9.585,3,24.141,3,38v81H95l-1,4-3,1v1H89v1H39v-1l-4-1c-4.343-9.585-3-24.141-3-38V7h1l1-4C35.749,2.263,37.837,1.378,39,0ZM80,4L79,8H49L48,4H39a19.219,19.219,0,0,1-3,3V121a19.766,19.766,0,0,1,3,3H89a19.213,19.213,0,0,1,3-3V7C87.233,4.235,88.245,3.9,80,4Z"],
        "laptop-mac":[0,96,960,960,"M57 896q-23.513 0-40.256-17.625Q0 860.75 0 836h141q-24 0-42-18t-18-42V276q0-24 18-42t42-18h678q24 0 42 18t18 42v500q0 24-18 42t-42 18h141q0 25-17.625 42.5T900 896H57Zm423-22q14.45 0 24.225-9.775Q514 854.45 514 840q0-14.45-9.775-24.225Q494.45 806 480 806q-14.45 0-24.225 9.775Q446 825.55 446 840q0 14.45 9.775 24.225Q465.55 874 480 874Zm-339-98h678V276H141v500Zm0 0V276v500Z"],
        "laptop":[0,96,960,960,"M140 816q-24.75 0-42.375-17.625T80 756V276q0-24.75 17.625-42.375T140 216h680q24.75 0 42.375 17.625T880 276v480q0 24.75-17.625 42.375T820 816H140Zm0-60h680V276H140v480ZM70 936q-12.75 0-21.375-8.675Q40 918.649 40 905.825 40 893 48.625 884.5T70 876h820q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 936H70Zm70-180V276v480Z"],
        "smart-phone":[0,96,960,960,"M260 1016q-24 0-42-18t-18-42V196q0-24 18-42t42-18h440q24 0 42 18t18 42v760q0 24-18 42t-42 18H260Zm0-90v30h440v-30H260Zm0-60h440V286H260v580Zm0-640h440v-30H260v30Zm0 0v-30 30Zm0 700v30-30Z"],
        "storage":[0,96,960,960,"M154 896q-30.525 0-52.262-21.737Q80 852.525 80 822t21.738-52.263Q123.475 748 154 748h652q30.525 0 52.263 21.737Q880 791.475 880 822t-21.737 52.263Q836.525 896 806 896H154Zm26-38h72v-72h-72v72Zm-26-454q-30.525 0-52.262-21.737Q80 360.525 80 330t21.738-52.263Q123.475 256 154 256h652q30.525 0 52.263 21.737Q880 299.475 880 330t-21.737 52.263Q836.525 404 806 404H154Zm26-38h72v-72h-72v72Zm-26 284q-30.525 0-52.262-21.737Q80 606.525 80 576t21.738-52.263Q123.475 502 154 502h652q30.525 0 52.263 21.737Q880 545.475 880 576t-21.737 52.263Q836.525 650 806 650H154Zm26-38h72v-72h-72v72Z"],
        "signal":[0,96,960,960,"M749.882 896Q729 896 714.5 881.417 700 866.833 700 846V306q0-20.833 14.618-35.417Q729.235 256 750.118 256 771 256 785.5 270.583 800 285.167 800 306v540q0 20.833-14.618 35.417Q770.765 896 749.882 896ZM250.5 896q-10.5 0-20-4t-16-10.5Q208 875 204 865.618q-4-9.383-4-19.618V706q0-20.833 14.618-35.417Q229.235 656 250.118 656 271 656 285.5 670.583 300 685.167 300 706v140q0 10.235-4 19.618-4 9.382-10.5 15.882T270 892q-9 4-19.5 4Zm249.382 0Q479 896 464.5 881.417 450 866.833 450 846V506q0-20.833 14.618-35.417Q479.235 456 500.118 456 521 456 535.5 470.583 550 485.167 550 506v340q0 20.833-14.618 35.417Q520.765 896 499.882 896Z"],
        "wifi":[0,96,960,960,"M201 668q-13-13-13.5-31.5T201 606q63-55 132-82.5T480 496q78 0 147 27.5T759 606q14 12 14 30t-14 32q-13 13-31 13t-32-12q-54-45-107.5-64T480 586q-55 0-108.5 19T264 669q-14 12-32 12t-31-13ZM32 499q-13-13-13.5-32T32 436q91-82 205.5-131T480 256q128 0 242.5 49T928 436q14 12 14 30.5T928 499q-13 13-31.5 13T864 500q-83-71-179-112.5T480 346q-109 0-205 41.5T96 500q-14 12-32.5 12T32 499Zm448 430q-36 0-63-27t-27-63q0-36 27-63t63-27q36 0 63 27t27 63q0 36-27 63t-63 27Z"],
        "kitehcn":[0,96,960,960,"M338.825 406Q326 406 317.5 397.375T309 376v-58q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T369 318v58q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 361Q326 767 317.5 758.375T309 737V601q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T369 601v136q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625ZM220 976q-24.75 0-42.375-17.625T160 916V236q0-24.75 17.625-42.375T220 176h520q24.75 0 42.375 17.625T800 236v680q0 24.75-17.625 42.375T740 976H220Zm0-60h520V518H220v398Zm0-458h520V236H220v222Z"],
        "

This file has been truncated. show original

Gero670 · August 20, 2023, 3:57pm

Dang, good job. For now I’ve just setted up multiple mushroom entity/template cards and are good enough for displaying even custom info, but i love the nesting of information in the card (knowing room temp + humidity or the flexibility to know the used storage vs the storage capacity).
I like the look of the graphs too, it’s not too invasive but effective.
Thanks for sharing the code! Will implement at some point