Orbit Cards: collection of modern Home Assistant dashboard cards

[andyblac (Andy)]

Orbit Cards

Orbit Cards is a collection of modern Home Assistant dashboard cards with a shared visual style, shared editor controls, and support for custom icons, dynamic colours, popups, navigation, and compact grouped layouts.

Repository: andyblac/Orbit-Cards
WiKi: Guide (Work in progress)

Cards

Orbit Cards currently includes:

Card	Type	Purpose
Room Card	custom:orbit-room-card	A room overview card with a main entity, room navigation, status entities, side buttons, and curved quick actions.
Status Card	custom:orbit-status-card	A status summary card with Standard, Icon Only, grouped Icon Only, and Person modes.
Action Card	custom:orbit-action-card	A compact action card for scenes, scripts, automations, and grouped action shortcuts.

Features

• Built-in visual editors for all cards.
• Shared colour handling across cards.
• Named colours, theme colours, hex colours, rgb(), hsl(), and light colour support where supported.
• Colour preview swatches with a native colour picker and selectable theme colour previews.
• Material Design Icons and local SVG/image icons.
• Tap, hold, navigation, service, popup, and Browser Mod actions.
• Dynamic entity state updates scoped to only the entities used by each card.
• Grouped compact layouts for Status Icon Only and Action Card.

Installation

HACS

1. Open HACS.

2. Go to Frontend.

3. Open the menu and choose Custom repositories.

4. Add:

   https://github.com/andyblac/Orbit-Cards
   

5. Select category Dashboard.

6. Install Orbit Cards.

7. Refresh Home Assistant.

8. Add one of the Orbit cards from the dashboard card picker.

Manual

1. Download dist/orbit-cards.js from the repository.

2. Copy it to:

   /config/www/orbit-cards.js
   

3. In Home Assistant, go to Settings -> Dashboards -> Resources.

4. Add this resource:

   /local/orbit-cards.js
   

5. Set the resource type to JavaScript module.

6. Refresh Home Assistant.

Updating

After updating the JavaScript file, refresh the browser or reload Home Assistant frontend resources. Some browsers and Home Assistant apps cache frontend resources aggressively, so a hard refresh may be needed after manual updates.

A Wiki guide is in my GitHub Repo , Please report any bugs / issues.

Andy.

[andyblac (Andy)]

Release v0.11.46-beta · andyblac/Orbit-Cards

Version summary:
Orbit Cards v0.11.46
Room Card v0.6.36
Status Card v0.11.25
Action Card v0.4.25

[andyblac (Andy)]

Added localisation support for Orbit Cards

• Add shared localisation helper with Home Assistant language detection
• Add English and English UK translation files
• Add partial translation files for German, Spanish, French, Italian, Dutch, and Brazilian Portuguese

I would appreciate the help with translations, I have used AI to partially translate some languages, If any native speakers could check and correct if they are incorrect.

This is currently in the Dev branch here.

[andyblac (Andy)]

I think these cards are ready, so enjoy the First Release out of beta.

Release First Release v0.12.0 · andyblac/Orbit-Cards

[andyblac (Andy)]

Just a small fix to..

Fix compact grouped card layout

• Set Action Card and Status Icon Only grouped layouts to use auto height by default.
• Match grouped outer and inner compact card aspect ratio at 0.93 / 1.
• Prevent grouped tiles from stretching vertically inside the card body.
• Keep compact grouped content aligned to the top to avoid clipping and extra gaps.
• Rebuilt dist/orbit-cards.js.

Versions:

• Orbit Cards: 0.12.1
• Status Card: 0.12.1
• Action Card: 0.5.1

Release Release v0.12.1 · andyblac/Orbit-Cards

[andyblac (Andy)]

Fix grouped compact card body height

• Let grouped Action Card and Status Icon Only card shells use content-driven height.
• Removed the grouped outer aspect-ratio reservation that caused gaps below compact multi-card rows.
• Kept grouped inner tiles at the compact 0.93 / 1 aspect ratio.
• Rebuilt dist/orbit-cards.js.

Versions:

• Orbit Cards: 0.12.2
• Status Card: 0.12.2
• Action Card: 0.5.2

Release v0.12.2 · andyblac/Orbit-Cards

[andyblac (Andy)]

Release Notes

Editor polish and picker improvements

This release brings a large visual-editor refresh across the Orbit cards, with controls now much closer to native Home Assistant behavior.

Highlights

• Improved entity, area, navigation, color, theme, and name pickers.
• Moved domain filters inside picker popovers.
• Fixed picker filter clicks causing dashboard scrolling behind the editor.
• Fixed All filters so they now truly show all supported domains.
• Added camera support to relevant filters.
• Added composed/custom name picker support.
• Added icon source controls for Area, Entity, Custom, and None where relevant.
• Reworked color pickers with swatches, values, dropdown behavior, and clear actions.
• Added automatic Home Assistant theme color discovery.
• Theme colors are now marked with a T badge.
• Updated editor labels to better match Home Assistant wording and casing.
• Cleaned up redundant translations where Home Assistant already provides native wording.
• Improved Status and Action card editor styling to match the Room Card editor.
• Updated README documentation for the new editor behavior.

Build

• Updated bundled dist output.
• Replaced deprecated Vite config usage.
• npm run build passes cleanly.

Release v0.12.9 Editor rewrite test build. · andyblac/Orbit-Cards

I would really appreciate some feedback on the new editor.

[andyblac (Andy)]

Orbit Cards v0.13.0

This release is a major editor, naming, and interaction update for Orbit Cards. It renames the Room Card to Area Card, adds native-style interaction controls across all cards, improves picker behaviour, and refines grouped card layouts.

Highlights

• Renamed Orbit Room Card to Orbit Area Card
• Added native-style Interactions sections across Area, Status, and Action cards
• Reworked editor controls to more closely match Home Assistant
• Improved entity, area, navigation, icon, colour, and theme pickers
• Refined grouped layouts for Status icon-only and Action card views
• Added legacy migration and compatibility helpers for existing configs

Area Card

• New preferred card type: custom:orbit-area-card
• Legacy custom:orbit-room-card remains supported as a fallback alias
• Existing Room Card configs are migrated when opened in the editor
• Legacy room_name config is migrated to area_name
• Old navigate.navigation_path config is still supported as a fallback
• Card navigation now uses tap_action
• Removed the old standalone Navigation Path editor field
• Added interactions for:
  • Card tap, hold, and double tap
  • Main entity/icon tap, hold, and double tap
  • Side buttons
  • Curve buttons
  • Action button
• Improved Area / Entity / Custom icon source behaviour
• Cleans stale custom icon config when using Area or Entity icon source

Status Card

• Added native-style Interactions support
• Added card tap, hold, and double tap actions
• Added icon tap, hold, and double tap actions
• Added double-tap runtime handling
• Improved Status Card name handling
• Updated template fields and helper text
• Refined Status icon-only grouped layout spacing
• Improved shadow rendering and card spacing in grouped layouts
• Updated Status editor controls to better match the Area Card editor

Action Card

• Added tap, hold, and double tap interactions
• Added double-tap runtime handling
• Improved grouped Action Card layout spacing
• Fixed clipped shadows in grouped layouts
• Updated editor controls for better consistency with the other Orbit cards

Editor Improvements

• Major editor rewrite and cleanup
• Added native-style collapsible Interactions sections
• Added Add interaction behaviour for optional actions
• Improved action default handling, including Default (Nothing) where appropriate
• Popup actions remain YAML-only as an advanced option
• Improved entity picker filtering
• Fixed domain filter behaviour
• All filters now correctly include all supported domains
• Added cameras to relevant domain filters
• Entity picker secondary text now shows Area only
• Area picker clear button and hover styling now better match native HA controls
• Name controls now support composed/custom picker behaviour
• Button toggles now align to the right where appropriate
• Text inputs now use more native HA styling
• Cleaned up label casing and wording to better match Home Assistant

Colour And Theme Picker

• Reworked colour picker to behave more like a native selector
• Added Color / Theme tab handling
• Colour picker now shows a preview circle and hex value
• Existing theme colours are shown when switching tabs
• Theme colours are detected dynamically from the active HA theme
• Theme-derived colours are marked with a T badge
• Filtered invalid/numeric theme variables from the picker
• Added clear behaviour consistent with native selectors

Layout Improvements

• Refined grouped Status and Action card layouts
• Added shared grouped card layout helper
• Improved row spacing and wrapping
• Reduced visual gaps in grouped rows
• Fixed shadows being clipped inside grouped layouts
• Improved layout consistency when used inside Sections layouts

Home Assistant Integration

• Improved custom card registration
• Avoids duplicate/stale card picker entries
• Fixed Add to dashboard behaviour where tapping a card preview could fail to add it
• Preserves editor preview interactions while allowing add-card picker clicks to work
• Improved use of Home Assistant native translations where possible
• Cleaned up local translations and casing

Internal Cleanup

• Renamed Room Card files and folders to Area Card equivalents
• Added shared config migration helper
• Added shared card registration helper
• Added shared name picker helper
• Added shared layout helper
• Improved common editor helpers across all cards
• Updated README and images for Area Card naming
• Updated Vite config

Compatibility Notes

Existing custom:orbit-room-card configs should continue to work through the legacy alias and migration helpers, but new configs should use:

type: custom:orbit-area-card

Old navigation config is still supported as a fallback, but the editor now writes navigation through tap_action.

Verification

• npm run build passes
• git diff --check passes

Release v0.13.0: Add native Interactions across Orbit cards ·...

[andyblac (Andy)]

Orbit Cards v0.13.2

Fix add-card preview taps and bump patch versions
Add editor documentation helper link

Orbit Cards v0.13.1

Fix Area Card card-level actions without main entity

Release v0.13.2 Release · andyblac/Orbit-Cards

[andyblac (Andy)]

found one more pesky bug...

Release v0.13.3 - Fix grouped card styling when not separated ·...

I have also started a WiKi (Work in progress)

Home

[andyblac (Andy)]

New Orbit Deck Card - feedback wanted

Hi all,

I’ve been working on a new card for Orbit Cards called Orbit Deck Card, and I’d love some feedback from anyone willing to test it.

The idea is simple: use any Lovelace card inside a managed layout, either as wrapped cards or as tabs.

It is currently on the deck-card branch, so it is not in the main release yet.

Branch:

GitHub - andyblac/Orbit-Cards at deck-card

What it does

The new card supports:

• Wrap layout

  • Display multiple cards in rows
  • Set items per row
  • Optionally show cards as separate cards or grouped together

• Tabs layout

  • Put each card behind a tab
  • Set tab name and icon
  • Choose a default tab
  • Control tab width mode
  • Style tab colours and font size

• Per-card styling

  • Padding controls for each card
  • Useful for cards that need small layout tweaks without writing card_mod

Example config

type: custom:orbit-deck-card
layout: tabs
tab_font_size: 18px
decks:
  - attributes:
      icon: mdi:home
      name: Home
      default: true
    card:
      type: entities
      entities:
        - light.lounge

  - attributes:
      icon: mdi:lightbulb
      name: Lights
    card:
      type: entities
      entities:
        - light.kitchen
        - light.office

  - attributes:
      icon: mdi:chart-line
      name: Energy
    card:
      type: custom:gauge-card-pro
      entity: sensor.energy_today

Why I made it

Orbit Cards already has a multi-card style layout for Status and Action cards. I wanted to make that idea more general, so it could be used with any card, not just Orbit’s own cards.

The goal is to make layouts like this easier:

• A row of gauges
• A tabbed control panel
• A compact dashboard section
• Multiple related cards grouped under one visual block

What I’d like feedback on

If anyone tests it, I’d especially like feedback on:

• Does the editor feel natural?
• Does the tab layout behave how you would expect?
• Are the styling options enough, or too much?
• Does wrapping feel consistent with native Home Assistant layouts?
• Any cards that do not behave correctly inside it?
• Any confusing naming in the YAML or editor?

This is still early, so config may change a little before I call it stable.

Main repo:

GitHub - andyblac/Orbit-Cards: Custom cards for Home Assistant

Deck Card branch:

GitHub - andyblac/Orbit-Cards at deck-card

Thanks in advance to anyone who gives it a try.

[andyblac (Andy)]

Release Orbit Cards v0.14.0 · andyblac/Orbit-Cards