What is this?

HA component kit is a set of React-based packages for building highly customizable dashboards on top of Home Assistant.

Use it to:

• Build your own dashboard UI using familiar React patterns.
• Drop in ready-made components from @hakit/components.
• Talk to Home Assistant via @hakit/core, which wraps the official Home Assistant WebSocket API for authentication, state and actions.

Whether you just want a nicer wall tablet view or a fully bespoke control centre, HAKit gives you the building blocks.

Key ideas

• Flexible by design
  Compose your own layouts and components, or mix them with the prebuilt cards. You’re not locked into a single layout or opinionated theme.

• Real-time, reactive dashboards
  State updates flow in via WebSockets, so your UI stays in sync with Home Assistant without extra glue code.

• Easy to host
  Serve your dashboard from any web server, or use the Home Assistant Add-on to surface it directly in the Home Assistant sidebar.

• Future: visual editor
  The current focus is on developers. The longer-term goal is a drag-and-drop UI editor, shipped via the add-on, so non-devs can build dashboards visually.

Ready to dive in? Start with the Getting Started guide.

---

Support the project

This has taken a $*#% tonne of hours to build, document, and maintain.
If it saves you time or becomes part of your setup, a small donation goes a long way in justifying future work.

---

Get Started

The fastest way to spin up a new project is with the create command. It sets up React, TypeScript, Vite and HAKit with a simple terminal wizard:

  npm create hakit@latest

Or, if you want to install @hakit/core or @hakit/components manually on an existing project:

  npm install @hakit/core @hakit/components

Home Assistant Addon

There's a Home Assistant Addon available which will serve your prebuilt dashboard to a new sidebar link in home assistant making it easier to access your custom dashboard.

Contributing

Contributions are very welcome — whether it’s bug reports, new features, docs improvements, or just “this feels weird” feedback.

• Open an issue if something looks off or could be improved.
• Open a PR if you’ve got a fix or feature ready to go.

There are detailed guidelines on getting set up and adding new features in here.