https://github.com/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.
https://github.com/shannonhochkins/ha-component-kit
component components dashboard hakit home-assistant homeassistant homeassistant-custom-component homeassistant-frontend homeassistant-integration hooks react react-components react-redux typescript ui
Last synced: 9 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/shannonhochkins/ha-component-kit
- Owner: shannonhochkins
- Created: 2023-06-26T02:32:57.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-01T07:48:40.000Z (21 days ago)
- Last Synced: 2025-04-05T16:01:37.287Z (17 days ago)
- Topics: component, components, dashboard, hakit, home-assistant, homeassistant, homeassistant-custom-component, homeassistant-frontend, homeassistant-integration, hooks, react, react-components, react-redux, typescript, ui
- Language: TypeScript
- Homepage: https://shannonhochkins.github.io/ha-component-kit/
- Size: 161 MB
- Stars: 973
- Watchers: 20
- Forks: 47
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- Code of conduct: CODE_OF_CONDUCT.md
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
HA COMPONENT KIT
Join our community!
## Take Your [Home Assistant](https://www.home-assistant.io/) Dashboards to the Next Level 🚀
Designed with developers in mind, this powerful package is built on [React](https://react.dev/) to create seamless, highly customizable interfaces for your Home Assistant dashboards. Whether you're coding your own unique components or taking advantage of the prebuilt library from [@hakit/components](https://www.npmjs.com/package/@hakit/components), the possibilities are endless!
##### 🏠 **Ultimate Flexibility**: Create stunning, personalized dashboards tailored to your needs.
##### ⚡ **Powered by Home Assistant**: The [@hakit/core](https://www.npmjs.com/package/@hakit/core) leverages the official [Home Assistant WebSocket API](https://github.com/home-assistant/home-assistant-js-websocket) to handle authentication and core functionality, enabling a dynamic, real-time experience in your React dashboards.
##### 🌍 **Effortless Deployment**: Host your dashboard on any web server or serve it directly from Home Assistant using the [Home Assistant Addon](https://github.com/shannonhochkins/ha-component-kit/blob/master/ADDON.md).
##### 📅 **Future Goals**: While the package currently focuses on empowering developers, we're working on a future release that will introduce an intuitive drag-and-drop UI editor, enabling anyone to design dashboards effortlessly through the Home Assistant Addon.
Ready to transform your Home Assistant experience? Dive into the [Getting Started](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/introduction-getting-started--docs) Guide and begin building today!
## Demo
Visit the [Demo](https://shannonhochkins.github.io/ha-component-kit/iframe.html?args=&id=introduction-demo--demo&viewMode=story) to try it out!
If you like anything here, be sure to 🌟 [the repo!](https://github.com/shannonhochkins/ha-component-kit)
### Documentation
There's extensive [documentation](https://shannonhochkins.github.io/ha-component-kit) 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 :)
### 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](https://www.npmjs.com/package/@hakit/core) or [@hakit/components](https://www.npmjs.com/package/@hakit/components) manually on an existing project:
```
npm install @hakit/core @hakit/components
```
### Home Assistant Addon (WIP)
There's a [Home Assistant Addon](ADDON.md) available which will serve your dashboard to a new sidebar link in home assistant making it easier to access your custom dashboard.
### Supported Cards
- [AlarmCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-alarmcard--docs)
- [AreaCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-areacard--docs)
- [ButtonCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-buttoncard--docs)
- [ClimateCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-climatecard--docs)
- [CameraCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-cameracard--docs)
- [CalendarCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-calendarcard--docs)
- [EntitiesCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-entitiescard--docs)
- [FabCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-fabcard--docs)
- [FamilyCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-familycard--docs)
- [GarbageCollectionCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-garbagecollectioncard--docs)
- [MediaPlayerCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-mediaplayercard--docs)
- [PictureCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-picturecard--docs)
- [SensorCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-sensorcard--docs)
- [SidebarCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-sidebarcard--docs)
- [TimeCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-timecard--docs)
- [TriggerCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-triggercard--docs)
- [WeatherCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-weathercard--docs)
- [VacuumCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-vacuumcard--docs)
### Known Issues
- Anything else? Please, if you notice anything that doesn't feel / look right, please report it, i rely on user testing to make improvements.
### What's next?
There's a Roadmap.md file with a few things i'm working on!
Have your say! Join the [discord](https://discord.com/invite/cGgbmppKJZ) 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](CONTRIBUTING.md).