A pixel‑level Apple Home style dashboard for Home Assistant. Instantly turns your Lovelace dashboard into an iOS Home app experience: familiar layout, section structure, color language, typography, card behaviors, navigation and editing flow – all automatic.

Fully customizable per dashboard: every change you make (favorites, section order, hidden sections, per‑room layouts, tall/regular card toggles, background, included switches, scene & camera order, etc.) is saved inside that specific dashboard’s Lovelace config. Create multiple Apple Home dashboards (e.g. Family vs Wall Tablet vs Kids) – each keeps its own independent appearance & layout without extra YAML.

1. Install
   • HACS: Add custom repository (Dashboard), install "Apple Home Dashboard Strategy" (resource added automatically). OR
   • Manual: Download apple-home-dashboard.js to /config/www/ and add a Lovelace resource: /local/apple-home-dashboard.js (Module).
2. Create a new Dashboard (Settings → Dashboards → +) – give it a path like apple-home and switch it to YAML mode (Enable advanced mode in your profile if needed).
3. Open Raw Configuration for that dashboard and paste ONLY:

strategy:
  type: custom:apple-home-strategy
views: []

4. Save & refresh – the Home (My Home) view, Rooms, Groups, Scenes & Cameras generate automatically. Enter Edit mode to customize.

Using the default Overview instead: You can replace the Overview dashboard the same way (edit its Raw Configuration and set the same strategy block). If you want to keep the original Overview layout, create a separate dashboard instead.

• Automatic My Home view with smart sections (Favorites, Status, Rooms, Groups, Scenes, Cameras)
• True Apple Home grouping: Lights, Climate, Security, Media, Other (+ Default Room for unassigned entities)
• One room page per Home Assistant Area – created automatically, plus a page for entities without an area
• Group pages (Lights / Climate / Security / Media / Other) just like Apple’s category filters
• Dedicated Scenes section/page (scenes + scripts) & Cameras sesction/page
• Favorites section identical in behavior to Apple Home’s “Favorite Accessories” row
• Tall vs Regular card layouts (thermostats, locks, alarms, cameras default tall – others regular)
• Color & icon language mirroring Apple Home (active vs inactive states, functional group colors)
• Context‑aware naming (removes redundant area names from accessory labels)
• Clean navigation with iOS‑style header & back transitions
• Camera tiles show latest snapshot & open live view (simple and Apple‑like)
• Responsive adaptive grid (mobile, tablet, desktop) following Apple spacing feel
• Readable in light or dark (neutral inactive surface, bright active surfaces)
• RTL & multi‑language aware (mirrors layout & chevrons)

You add the strategy – everything else is discovered:

• Discovers all entities in your instance, groups them by Area & Domain
• Generates “Room” pages for every Area (and a Default Room for unassigned entities)
• Separates special domains into Scenes & Cameras sections/pages
• Adapts iconography (garage doors vs blinds, outlets vs generic switches, locks, alarm panels, media states)
• Applies Apple‑style active/inactive styling & tall layout defaults

No manual YAML card definitions required.

Switch handling: Regular switches are excluded by default (to avoid clutter from technical / helper switches). Outlets (device_class=outlet) are always shown. You can enable all switches or selectively add specific ones via customization.

• Dashboard now automatically adapts to changes without requiring page refresh
  • Entity and device area changes reflect immediately
  • Hidden, disabled, or deleted entities are automatically removed
  • Area registry changes update instantly
  • RTL/language changes trigger automatic re-render

• Robot Vacuum Support: Full vacuum domain support with tall card design and localized state text
• Gas & Flood Sensors: Added support for gas sensors and flood/moisture sensors with proper icons and "Detected" / "Not Detected" status
• Button Entities: Support for button and input_button domains with press actions
• Input Boolean: Full toggle functionality support
• Extra Accessories: Manually include any Home Assistant entity not in standard domains

• iOS 26 Liquid Glass Design: Circular buttons with frosted backdrop blur and gradient glow borders
• Improved Drag & Drop: Enhanced SortableJS integration with smoother touch support and variable-speed edge scrolling
• Responsive Breakpoint System: 5 comprehensive breakpoints for mobile, tablet, and desktop (including single-column mode for small screens)
• Smart Camera Carousel: Shows 1.5 cameras on small mobile with intelligent layout for single/dual cameras
• Accessibility: prefers-reduced-motion support and fluid typography with clamp()

• Temperature Unit Detection: Fixed temperature showing correct unit (°C/°F) for climate states
• iOS Safari Background: Fixed background display issues on iOS Safari with pseudo-element approach
• Card Interactivity: Fixed cards becoming unclickable after navigation
• Drag & Drop: Fixed section reorder drag and drop after v1.1.0 updates

Just like Apple Home:

• Mark any accessory as a Favorite (appears at top of Home view)
• Reorder Favorites in Edit Mode (drag & drop)
• Favorites always use regular (not tall) layout for a compact grid

You can hide or reorder sections in Edit Mode.

Long‑press the header Edit toggle (or press “Edit”) to enter Edit Mode. You can:

• Drag & drop accessories within a Room, Favorites, Scenes, Cameras, or Domain group
• Reorder sections on the Home view
• Hide sections you don’t want to see
• Mark / unmark favorites
• Toggle tall vs regular size (supported entities only: climate, lock, alarm, camera) per context
• Reorder Scenes and Cameras individually
• Per‑room reordering (each Room page keeps its own layout)
• Per‑domain ordering inside Room pages (Lighting, Climate, Security, Media sub‑groups)

All changes are stored with the dashboard and persist automatically.

• Active accessories: white surface, dark text, colored circular icon background (group color) – Apple style
• Inactive: translucent dark tile, colored icon, subdued text
• Thermostats: large temperature typography (tall layout) or compact inline (regular)
• Scenes / Scripts: action style (no state line, clean icon)
• Locks, alarm panels, cameras: tall for glanceable status & clarity
• Group colors:
  • Lights / Other (Outlets): Warm Yellow
  • Climate / Fans / Covers: Cool Blue / Mode color accent
  • Security (Locks, Alarm, Cameras, Sensors): Teal
  • Media: Neutral White icon on dark / inverted when active

Personalize the dashboard backdrop while keeping accessories readable. Choose or change background styles (solid, translucent, image-based or preset themes) directly from the Home settings – updates apply instantly across all views.

Notes:

• Background persists (per dashboard) after reloads
• Designed to maintain Apple-style contrast & legibility
• Works with light/dark system themes

Accessory names are automatically cleaned to remove redundant room/area names (mirrors Apple’s shorter labels). Example: “Living Room Lamp” in the Living Room page becomes just “Lamp”.

• Garage doors / gates get dedicated icons & grouping under Security
• Outlets distinguished from other switches
• Alarm panels & locks elevated with tall styling
• Motion / contact / occupancy sensors feed status summaries

• Snapshot tile (tall) – opens live stream on tap
• Graceful fallback icon when camera unavailable
• Shown in Home section and full Cameras page

(Underlying snapshot mechanics intentionally omitted – you just get a native feel.)

1. Add this repository as a Custom Repository (Category: Dashboard)
2. Install “Apple Home Dashboard Strategy”
3. Restart Home Assistant if prompted
4. Add resource automatically (or manually if needed):
   • URL: /hacsfiles/apple-home-dashboard/apple-home-dashboard.js
   • Type: Module

1. Download apple-home-dashboard.js from the latest release
2. Place in /config/www/apple-home-dashboard.js
3. Add a Lovelace resource:
   • Settings → Dashboards → Resources → +
   • URL: /local/apple-home-dashboard.js
   • Type: Module

Create a new dashboard (e.g. path: apple-home) and set strategy:

strategy:
  type: custom:apple-home-strategy
views: []

Open the new dashboard – it will populate automatically.

Example:

strategy:
  type: custom:apple-home-strategy
  options:
    title: Casa

No YAML needed for any of the above.

1. Update via HACS (or replace the single JS file manually)
2. Refresh the dashboard (customizations persist)

• Use Areas in Home Assistant – they drive Room generation & cleaner names
• Name scenes & scripts with friendly labels (appear exactly as given)
• Favor short entity names; area name removal keeps things tidy
• Use Edit Mode after first load to fine‑tune top‑level order & favorites

Optimized for narrow viewports: adaptive grid, comfortable touch targets, and condensed header.

MIT – see LICENSE.

This project represents weeks of focused effort refining countless tiny Apple Home interface details. A large portion of the implementation was accelerated with AI-assisted ("vibe") coding, then manually reviewed and polished. That means:

• You get a lot of functionality fast
• Edge cases may still surface
• Feedback & issue reports are very welcome

If you find this useful and want to support continued refinement:

• Patreon: https://patreon.com/nitaybz
• Ko-fi: https://ko-fi.com/nitaybz
• PayPal: https://paypal.me/nitaybz

Stars, shares, and kind words help too. Thank you.

Made with ❤️ to bring Apple’s Home experience into Home Assistant.