shannonhochkins / ha-component-kit

A Home Assistant React component library to generate dashboards with ease, This utilizises a massive list of Components / cards to use out of the box, a large range of hooks to build your own custom functionality, and a hell of a lot more! It's using web sockets to retrieve information from your home assistant instance so there's 0 latency!
https://shannonhochkins.github.io/ha-component-kit/
618 stars 32 forks source link
component components dashboard hakit home-assistant homeassistant homeassistant-custom-component homeassistant-frontend homeassistant-integration hooks react react-components react-redux typescript ui
LOGO

HA COMPONENT KIT

Join our community!

Unlock the ultimate customization for your Home Assistant dashboards with this package, leveraging React for seamless, personalized interfaces.

Demo

Visit the Demo to try it out!

If you like anything here, be sure to 🌟 the repo!

DEMO

Documentation

There's extensive documentation which should give you all the information you need to get started!

Help me out?

As you can probably tell, a $*#% tonne of hours have gone into this! I'd really appreciate a small donation as it will help me validate that my time is well spent and will guarantee future additional changes :)

Buy Me A Coffee

Get Started

There's an npm create command which will setup react, typescript, vite & hakit automatically for you with a 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 (WIP)

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

Supported Cards

Known Issues

What's next?

There's a Roadmap.md file with a few things i'm working on! Have your say! Join the discord and let me know what you'd like to see next!

Contributors!

I welcome anyone who's willing to contribute to the package, if you're interested in helping out or have some suggestions to changes, please feel free to open a PR or an issue!

There's detailed instructions on how to get started if you want to introduce a new feature to the repository here.