Ecosyste.ms: Awesome

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

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: 3 months 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!

Lists

README 

        
# Overview



This repository contains functionality to easily generate custom dashboards with react for Home Assistant using the official web socket connection that the standard lovelace dashboards use.



Try it out now! [Demo](https://shannonhochkins.github.io/ha-component-kit/iframe.html?args=&id=introduction-demo--default&viewMode=story#)



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)



[![@hakit/core Downloads](https://img.shields.io/npm/dt/%40hakit%2Fcore.svg?style=flat&colorA=000000&colorB=000000&label=%40hakit%2Fcore%20downloads)](https://www.npmjs.com/package/@hakit/core)

[![@hakit/components Downloads](https://img.shields.io/npm/dt/%40hakit%2Fcomponents.svg?style=flat&colorA=000000&colorB=000000&label=%40hakit%2Fcomponents%20downloads)](https://www.npmjs.com/package/@hakit/components)



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

```



### Documentation



There's extensive [documentation](https://shannonhochkins.github.io/ha-component-kit) which should give you all the information you need to get started!



### Home Assistant Addon

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 FamilyCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-familycard--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)

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



### 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! Vote for what you'd like to see next in [upcoming features!](https://github.com/shannonhochkins/ha-component-kit/discussions/28)



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