Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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://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: 29 days ago
JSON representation

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!

Awesome Lists containing this project

README 

        

  

    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](https://shannonhochkins.github.io/ha-component-kit/iframe.html?args=&id=introduction-demo--default&viewMode=story#) to try it out!



If you like anything here, be sure to 🌟 [the repo!](https://github.com/shannonhochkins/ha-component-kit)



![DEMO](https://github.com/shannonhochkins/ha-component-kit/blob/master/stories/hakit-demo.gif?raw=true)



### 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 :)



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](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

- [NEW 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)

- [NEW 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).