Dashhaus
Home Assistant dashboards drawn in React: two finished looks, Orb and Field, that you install from the Marketplace,
and the headless hooks under them to draw your own.
Documentation: krystosterone.github.io/dashhaus, with Storybook at
/storybook.
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 Orb's or Field's dashboard and the deploy command only create
dashboards; they never change one that exists. The ones they create follow the skin 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.
- Testers wanted. Put it on your house, a phone or a wall panel, and tell us what you find: a card that draws
wrong, a device it misreads or doesn't draw, or simply that it works on your setup.
Open an issue; your Home Assistant and Dashhaus
versions and a screenshot help most.
For code that uses the packages: beta versions are 0.x, and a change that breaks something moves the middle number
(0.2 → 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.
Install
Orb and Field each install on their own from the Marketplace (HACS before Home Assistant 2026.11):
| |
|---|
| Orb: soft, round cards read at a glance | |
| Field: a hardware panel of keys, faders and dark screens | |
As a Home Assistant administrator, no terminal needed:
- Tap the skin's badge and press Download. If asked, add it as a custom repository of type Dashboard.
- Refresh the browser tab.
- Settings → Dashboards → Add dashboard, pick Orb or Field under Community dashboards, and press
Create (Home Assistant 2026.5 or newer).
The dashboard is laid out from your house and kept up to date as you add devices; each skin's page has its settings.
For scripted installs, CI or a dashboard of your own rows,
deploy from the command line.
Four ways in
Each way in is proved from the packed release on every change; spec/journeys.md lists them.
Develop
This repository is a component library, developed and checked in Storybook: two skins, Orb and Field, on the same
entity models and Home Assistant hooks, each with its own cards, dashboard furniture and Lovelace card
(custom:dashhaus-orb, custom:dashhaus-field).
corepack enable npm
npm install
npm run storybook
Requires Node 22.23.4 or later (.nvmrc pins it) and the npm packageManager pins. Storybook runs at
http://localhost:6006 and documents every card, supported footprint and skin, each skin under the same groups: Cards,
Bundles (Orb only), Dashboards, Foundations, Connected. Use the Theme menu to switch between Auto (system), Light and
Dark.
Create a new skin from the neutral shell:
npm run new-skin -- canvas
It registers the skin's Foundations, Dashboard, its own entry and Lovelace card; add real entity Cards with npm run new-card -- light --skin canvas. See spec/skins.md.
Packages
@dashhaus/core and @dashhaus/deploy are the headless foundation (with the Lovelace framework under
@dashhaus/core/lovelace) and the deploy CLI; @dashhaus/orb and @dashhaus/field are the two skins, each shipping its resource, the one file Home Assistant
loads: a deploy-only app installs a skin with the CLI, names its resourceFile in files and runs
npx dashhaus-deploy --skip-build. create-dashhaus-skin scaffolds a standalone skin. Package READMEs live in each
package; the release policy is spec/release.md.
Running with Home Assistant
Fill in .env and deploy:
npm run deploy
It uploads each skin's resource (Orb's, Field's and every registered generated skin's: its Lovelace card and its dashboard strategy), then creates one dashboard for each the first time, from the set declared in dashboard.config.mjs. You edit any Lovelace card's YAML in Home Assistant. See spec/deploy.md. Measure the deployed pages with npm run perf:collect; see spec/performance.md. The data boundary, the shared useHa<Kind> hooks and the injected transport are in spec/home-assistant.md.
Spec
The specification the code is held to, written for maintainers and agents. Tests, generators and Storybook read these files.
Contributing
Ask questions and agree proposed changes in GitHub Issues. Pull requests are accepted after that agreement. Before opening one, run npm run check and npm run test-storybook, document behavior changes, and preserve the domain → Home Assistant → skin import direction. CONTRIBUTING.md has the steps, and SECURITY.md how to report a vulnerability privately.
License
MIT — see LICENSE.
Third-party material keeps its own terms: the agent skills and design roles under .agents/ installed from upstream
projects (Emil Kowalski's skills, Impeccable, agency-agents) are not covered by this repository's license. Each one's
license sits beside it, and .agents/skills/THIRD_PARTY.md lists which is which.
