Introduction

Dashhaus draws Home Assistant dashboards in React and TypeScript, for phones, tablets and wall panels. It is two things:

• Two finished skins, Orb and Field. Each is a whole look for a dashboard, installed on its own from the Marketplace and laid out from your house, or in YAML. Nothing to build.
• The headless packages under them. The entity models, the Home Assistant store, a useHa<Name> hook and a headless component for each kind of entity, the interaction primitives and the card frame. A skin is drawing on top of these, so you can draw your own: in a React app of yours, or as a new skin with its own Lovelace card.

Beta

Dashhaus is in beta and hasn’t been tried on many homes yet, so it can still change quickly.

• An update can ask something of you. An update may rename a YAML key, change a hook or redraw a card. Each release says what changed and what to do; read it before you update.
• Your existing dashboards are safe. Adding the Dashhaus dashboard and the deploy command only create dashboards; they never change one that exists. The ones they create follow Dashhaus as it updates.
• Real devices vary. Every card is tested on Home Assistant’s standard entities, but an integration may report its device in a way no card expects yet. Locks, alarm panels and covers act on real things: try each one once while you can see it.
• In your own code, beta versions are 0.x, and a change that breaks something moves the middle number (0.2 to 0.3). A caret range stays on one 0.x line, so moving to the next is a step you take. Every @dashhaus/ package shares one version, so move them together. 1.0 will be the first stable release.

Testers are welcome. Put it on your house, a phone or a wall panel, and say how it went: a card that draws wrong, a device it misreads or leaves out, or simply that it works on your setup. Your Home Assistant and Dashhaus versions and a screenshot help most.

Four ways in

Dashhaus is used four ways, and each has its own way in: installing a finished skin, Orb or Field, is the first. Pick the one that matches what you want to end up with.

Install OrbSoft, round cards, on your Home Assistant from the Marketplace with no terminal: download it, then Add dashboard → Orb.

Install FieldA hardware panel of keys, faders and screens, from the Marketplace the same way: download it, then Add dashboard → Field.

Build a skinA look of your own, with no code to write: show an AI agent a picture or describe it, and it builds and deploys the skin. Or scaffold it yourself with create-dashhaus-skin.

Use the hooksHome Assistant's entities in a React app of yours, drawn your way: @dashhaus/core alone, no skin and no generator.

ContributeChange Dashhaus itself: fix Orb or Field, add a kind of entity to both, or start a skin in the repository.

Deploying from the command line serves the first ways in: a scripted deploy of Orb or Field, with a dashboard of your own rows, and the last step of building a skin.

How the pieces stack

Home Assistant
  └─ a transport: Home Assistant's own connection in a Lovelace card, or one your app opens
       └─ the store (createHaStore) and HaProvider: every entity, the connection status
            └─ useHa<Name>(entityId): the mapped entity, today's history and its actions
                 ├─ your own markup
                 └─ a skin: Orb's <Name>Tile, Field's <Name>Module
                      └─ its Lovelace card: custom:dashhaus-orb, custom:dashhaus-field

Each layer only knows the one above it. The entity models never see Home Assistant’s raw state; the hooks never draw; a skin’s cards never talk to Home Assistant, they take the hook’s result as props.

Words

These pages use one word per thing, the same as the code and Storybook.

Word	Means
Card	One entity drawn on a dashboard.
Tile	Orb’s card ready for a dashboard: the card in its size container with its details sheet (LightTile).
Module	Field’s card: a plate with its key, screen and fader, carrying its own detail panel (LightModule).
Details	What a card opens from its name or a press and hold: Orb’s sheet, Field’s panel.
Footprint	A card’s fixed height: compact, standard, featured in Orb; compact, standard in Field.
Connected	A card bound to the store: HaLightTile in Orb, HaLightModule in Field, on the shared useHaLight hook.
Lovelace card	The custom element Home Assistant loads (custom:dashhaus-orb), which draws a whole dashboard from its YAML.
Primitive	A headless interaction hook (usePress, useSlider): behaviour, no markup.
Part	A skin’s styled control built on a primitive: Orb’s TogglePill, Field’s Key.
Dashboard	A page of cards and what frames them: the header, rows of cards and the nav bar.