A modern Home Assistant dashboard built on Material Design 3 (MD3) principles, featuring dynamic colors, transparent card layouts, and a sleek, clean UI for an elegant smart home experience.
This comprehensive dashboard unifies control and monitoring for lights, switches, temperature and humidity sensors, rainfall, wind, UV index, radar, weather forecasts, alarms, Hue scenes, cameras, heat pumps, door and window sensors, and irrigation control - all presented in one cohesive, visually refined interface designed for both functionality and aesthetic harmony.
v.6.0.0 brings several new cards and usability improvements. A new Person Card shows who is home or away, while the current weather card has been streamlined into a single-line layout that still preserves most key information. This release also adds a Location Tracker, Battery Monitoring card for real-time sensor battery status, and a WiFi QR scanner for easy guest network access. Lighting controls have been upgraded with custom button cards to apply transparancy, the Curtain card now uses a custom implementation for better performance, and the Hue scene room selector has been expanded to support more rooms. Additionally, Expander cards help keep rooms organized by allowing sections to be collapsed, and new UI animations enhance visual feedback across the dashboard. This update also fixes animation artifacts and improves responsiveness when changing Hue scenes.
🎨 MD3 Theme Engine
Unlock unlimited color combinations with a simple color picker - thanks to the amazing work of Material You Theme repository.
👥 Per-User Styling
Each family member can have their own unique style and colors. Perfect for customizing your phone, tablets, and shared devices.
💡Community Inspired
Several cards are inspired by the incredible work of others in the Home Assistant community. Credit will be detailed below.
Overview Page
The Overview page gives you a quick view and control of what matters most. At the top, it displays the current date, time, and a notification bell to running task such as sprinkler, or camera feed when the door is open, etc
The weather summary has been optimized to fit one line for decluttering purpose. There is a new person card that will tell you if you are home and the other person is also home or away, with a personalized greeting.
Home Tab
The Home tab features cards designed for quick interaction. The first card shows indoor and outdoor temperatures with built-in climate controls in a clean, unified layout. Below this is a swipeable section where you can toggle room occupancy for climate control, room presence for lighting, and security cameras for quick on/off. These controls are used daily to interact with the backend automations.
Underneath, there’s a “Now Playing” music card and a floating navigation bar. The calendar is hidden behind this bar and can be accessed by swiping on the screen.
Events Tab
The Environment tab provides Google Calendar events from multiple calendar sources.
Active Tab
The Active tab filters and displays entities that are currently on or active. For example, it can show lights left on, open doors, and other active devices such lights, doors, windows, fans, light swiches, and curtains.
Components Used:
- Auto-Entities
- Button-Card
- Calendar Card Pro
- Config Template Card
- Custom Card Features
- Mini-Graph-Card
- Mushroom
- Navbar Card
- Paper Buttons Row
- Simple Swipe Card
Pop Up Cards
Pop-up cards are hidden within the Overview page and appear when you tap specific buttons or cards.
The Now Playing music card can be accessed by tapping the floating music control mentioned earlier.
The Location Person card displays the timeline of the person entities.
The Notifications card displays important items defined in your templates.yaml, such as chore management, active timers, live camera feeds when a door is opened, and sprinkler status.
The Alarmo card is opened by tapping the alarm icon in the top-right corner, allowing you to quickly arm or disarm the alarm system.
Components Used:
- Alarmo Card
- Bubble Card
- Location Timeline Card
- Mediocre Hass Media Player Cards
- Places
- Mushroom
- Timer Bar Card
Room Card Overview
The Room Card Overview gives you a quick snapshot of each room’s temperature and humidity, with the card color dynamically reflecting the current room status. Each card includes up to four customizable quick-action buttons for controls such as climate, lights, windows, doors, curtains, and fans. Tapping the room name takes you directly to that room’s dedicated page.
Components Used:
Scenes
I love Philips Hue, but I decided not to use the bridge. Instead, I connected the lights directly to Zigbee2MQTT (Z2M) and rely on Hass Scene Preset to make the effects work without the bridge. To activate a scene, I simply click the image representing the effect and select a room. This setup is made possible using a combination of powerful HACS components, automations, scripts, input booleans, input_number, and input texts. Check this [folder](https://github.com/ElementZoom/Material-Design-3-Dynamic-Mobile-Dashboard/tree/main/hue%20asset) to set it up.
Components Used:
Individual Room Page
I have transitioned away from dedicated room sections in favor of a Boolean-triggered Popup system. Now, for the above example, I have three buttons to show / hide more contents (Other Lights, Bathroom) that stay hidden until called upon, keeping the main view focused. Further down, there are three tabs:
-
Room Tab: Contains light entities and a popup card for additional lights, as well as other elements like covers, media, switch, or anything else relevant to the room.
-
Climate Tab: Displays climate controls for the room and shows humidity levels. In this example, the humidity is too high, so the indicator color appears red.
-
Active Tab: This tab only appears when something in the room is active - such as an open door or window.
Components Used:
- Auto-Entities
- Big Slider Card
- Button-Card
- Custom Card Features
- Material Home Component
- Mushroom
- Paper Buttons Row
- Simple Tabs Card
Weather Panel
The comprehensive weather panel is a popup card accessible by clicking any of the weather forecast buttons at the top of the Overview page (as mentioned earlier). Some tabs may be hidden when there are no active events - for example, if there are no earthquakes or volcanic activities at the moment.
This panel includes the following components:
- Earthquake
- Volcano
- Warning
- Weather Forecast
- Rainfall
- UV
- Wind
- Radar -Lunar
Each section highlights the next significant forecasted event. For example, the Wind section displays when the strongest forecasted wind is expected and its intensity, while the chart below shows the current wind speed in real time.
Components Used:
- Apex Charts Card
- Bubble Card
- Mushroom
- Lunar Phase Card
- Lunar Phase Integration
- Simple Tabs Card
- World's Air Quality Index
- Weather Card Extended
Camera
The Cameras displays live camera feeds from each area, showing the last detected activity along with controls for nearby lights for quick actions.
Components Used:
Irrigation
The irrigation page shows the current weather restriction level, along with tabs for different irrigation zones. It includes details such as each zone’s water valve status, the last run time, and direct controls for each valve - all presented with a clear, visually rich graph.
Below that, the system displays soil moisture levels, color-coded according to dryness, as well as the soil temperature for each zone.
Additionally, automations and scripts are used to control the valves, including phone notifications when the sprinklers turn on or off.
Components Used:
Theme / Layout:
- Material Symbols
- Material You Theme
- Material You Utilities
- Kiosk Mode
- Stack In Card
- Streamline Card
- Vertical Stack In Card
For new user:
- Copy all the code from full dashboard yaml to a new dashboard raw configuration editor to jumpstart your experience.
- Install the required HACS components (such as simple swipe card, stack-in-card, popup-card, etc. - see your setup for what’s needed).
- To unlock the full functionality (like weather icons, notification counts, and more), you’ll need to add the corresponding sensors to your config.
- For the Hue scene, you'll need to have the automation, scripts, input boolean, input text, and input number in your system that you can find in hue asset folder. For the images, you can get them from here.
- Apply the MD3 theme and select your preferred colors. It is accessible from Overview page > More > Bucket Fill Icon
- Apply wallpaper (optional)
- Set the companion app to full screen (optional)
For existing user:
- Review the streamline_template to see if you want to add / modify the previous version to the new version.
- Choose which card / visuals that you like to be added to your installation by clicking the hyperlink provided in the description above.
- Apply wallpaper (optional)
- Set the companion app to full screen (optional)
This project builds upon the work of:
- Nerwyn – Material You Theme & Material You Utilities
- MySmartHome - for the new simple tabs card, button cards styling, sliders, etc
- Other community members who kindly shared their cards
If you want to hire me to make your personal dashboard, you can hit me up on one of these social media platforms below:
Or you can support me on Ko-fi. Your support helps me keep creating and sharing more awesome open-source tools! Thank you for being part of this journey 🚀
