ha-dashboard-design

Solid

Beautiful, copy-paste-ready Home Assistant dashboard designs with complete CSS themes, card-mod styles, and button-card templates. Nine distinct visual styles: Glassmorphism, Dark Minimal, Material You, Nordic, Neon/Cyberpunk, Warm Home, Soft Pastel, Luxury Gold, and Retro Terminal. Use this skill whenever the user wants to make their dashboard look good, asks about card styling, CSS for Home Assistant, card-mod, button-card templates, Lovelace themes, dashboard aesthetics, or wants a specific visual style - even if they don't use the words "design" or "CSS".

Web & Frontend 89 stars 3 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
65
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# HA Dashboard Design Copy-paste-ready dashboard designs for Home Assistant. Pick a style, copy the blocks you need. ## Prerequisites (install via HACS) - **card-mod** - CSS styling for any card - **button-card** - fully customizable button cards - **mini-graph-card** - beautiful graphs (optional) - **mushroom** - modern card suite (optional, used in some styles) ## Available Styles | Style | Feel | Best for | |-------|------|----------| | `glassmorphism` | Frosted glass, depth, blur | Dark wallpaper backgrounds | | `dark-minimal` | Pure black, clean typography | Focus, productivity | | `material-you` | Google Material 3, dynamic color | Modern, familiar | | `nordic` | Light, airy, Scandinavian | Bright rooms, day use | | `neon-cyberpunk` | Glow effects, vivid neon | Night mode, wow factor | | `warm-home` | Amber/orange, cozy | Living rooms, evening | | `soft-pastel` | Soft pinks, lilac, mint | Friendly, family homes | | `luxury-gold` | Deep navy + gold accents | Premium, sophisticated | | `retro-terminal` | Green phosphor, monospace | Geek aesthetic | ## How to Use 1. Read the reference file for the chosen style 2. Copy the **Theme YAML** → paste into `config/themes/your-style.yaml` 3. Copy the **card-mod global styles** → paste into your dashboard resources 4. Copy individual **card blocks** → paste directly into your dashboard YAML 5. Adjust entity IDs to match your setup ## Quick Start - Any Style ```yaml # configuration.yaml - enable themes folder frontend: th...

Details

Author
tonylofgren
Repository
tonylofgren/aurora-smart-home
Created
5 months ago
Last Updated
3 days ago
Language
Python
License
MIT

Integrates with

Related Skills