// the find
shannonhochkins/ha-component-kit
Designed with developers in mind, this powerful package is built on React to create seamless, highly customizable interfaces for your Home Assistant smart home dashboards.
HAKit is a React/TypeScript component library for building custom Home Assistant dashboards. It wraps the official HA WebSocket API and ships a set of ready-made cards (lights, climate, media player, cameras, etc.) so you can build a fully bespoke wall-tablet UI instead of being stuck with Lovelace. Target audience is developers comfortable with React who want more control than HACS cards offer.
The WebSocket integration is done right — it wraps `home-assistant-js-websocket` directly rather than polling REST, so state updates are genuinely real-time without any extra glue. The Storybook setup with a `hass-connect-fake` mock layer is well thought out: you can develop and test cards without a live HA instance, and the mock fixtures cover the full entity domain surface (climate, vacuum, alarm panel, etc.). The `npm create hakit@latest` scaffold is a nice DX touch — it gets you a Vite+TypeScript project wired up correctly in one command, which is easy to get wrong manually. The HA Add-on that serves the built dashboard directly in the HA sidebar is a practical hosting solution most similar projects leave as an exercise for the reader.
Last push was March 2026 and the repo has been quiet; the promised visual drag-and-drop editor is still listed as future work with no visible progress, so if you adopt this expecting that roadmap item, you may be waiting indefinitely. The component library leans heavily on snapshot tests — the test coverage is thin for anything stateful or interactive, meaning regressions in WebSocket-driven behaviour won't get caught by CI. There's no built-in theming system beyond CSS variables, so if you want to match a custom design system you'll be overriding styles rather than composing tokens. Redux is in the dependency tree (visible in the topics) but the docs don't explain the state management boundaries clearly — it's not obvious what lives in Redux vs. React context vs. HA WebSocket state, which will bite you when debugging subtle update issues.