SMARTi watermark
Drag & Drop Card Wiki · Section 03

Your First Dashboard

A comprehensive and user-friendly guide to creating modern, polished, and fully responsive Home Assistant dashboards using the Drag & Drop Card. This wiki combines clear explanations, practical real-world configuration examples, step-by-step walkthroughs, and visual references where they add the most value — making it easy for both beginners and advanced users to design powerful and visually appealing dashboards.

12 sections Config examples HADS-ready exports
GitHub repo
Demo focus
Drag, resize, snap, export.
Add screenshots from admin to turn this section into a richer visual guide.

Your First Dashboard


The best first dashboard is small. Start with one canvas, one tab, and a few cards. Move them around, save, refresh, and get comfortable with the editor before adding advanced features.

A good first layout might include weather, lights, media, climate, and one status card. The point is not to build the final dashboard immediately. The point is to understand how cards behave on the canvas.

Recommended Setup

  1. Create a new Home Assistant dashboard. Go into Settings and the click "Dashboards"
  2. In the Bottom right corner, click "+ Add dashboard"
  3. Now If you are on Home Assistant version 2026.5 and above AND you have version v2.0.1 and above of the Drag & Drop Card installed, you can simply just click "Drag & Drop Dashboard" And everything will be set up for you. 
  4. The next steps (4- 7) are only necessary if you are on HA version below 2026:

    Select "New dashboard from scratch"
  5. Enter Edit mode
  6. Select "Panel (single card)" as the layout and click "Save"
  7. Then add a ne card through the "+ Add card" button and select the Drag & Drop Card

GIF slotAdd a short GIF showing the first card being added, moved, saved, and reloaded.
Last updated 2026-06-09.