Skip to content

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.

Notifications You must be signed in to change notification settings

shannonhochkins/ha-component-kit

Repository files navigation


HAKIT LOGO

HA COMPONENT KIT

Beautiful, Reactive, Real-Time Smarthome UI—Powered by You.

DemoDocumentationDiscordContributing

⭐️ Having fun? Support us! leave a star!



DEMO

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:

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.

Buy Me A Coffee

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

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.

About

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.

Topics

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Sponsor this project

Languages