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

Try it out now! Demo

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

I've spent a lot of time on this, you're free to use it but would appreciate a small donation if you're feeling generous! Buy me a coffee!

Buy me a coffee!

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

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

I'm working on a home assistant addon to create dashboards with these components, also making it easier to introduce custom components from the public and making it easier to apply style changes

Home Assistant Addon - 🌟 it if you're interested

1. ButtonCard
2. ClimateCard
3. EntitiesCard
4. FabCard
5. GarbageCollectionCard
6. MediaPlayerCard
7. PictureCard
8. RoomCard
9. SensorCard
10. SidebarCard
11. TimeCard
12. TriggerCard
13. WeatherCard

1. Group - a component that allows collapsible sections for other cards/components
2. Alert - Display warnings, errors, success and general information
3. Column - A card to layout components in a column with all flex properties available
4. ControlSlider - If you're used to the slider to control brightness, curtain position in home assistant, this is identical
5. Row - A card to layout components in a Row supporting all flex properties
6. RangeSlider - A simple slider similar to a volume slider
7. Tooltip - A simple tooltip component to wrap around anything and provide more information on hover
8. Modal - A Popup/Modal to show more information, can be triggered by any action

• Anything else? Please, if you notice anything that doesn't feel / look right, please report it, i rely on user testing to make improvements.

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!, here's a few other small ideas i have!

• WeatherCard - Add more detailed options for related sensors like UV Index, wind chill, humidity etc
• EntitiesCard - Add Toggle for entities that support "toggle" service to allow an easy way to toggle/turnon/turnoff devices
• ButtonCard - Different layout designs, including slider indicator for brightness and curtain position etc
• ClimateCard - control temperature from initial card (popup already has this but it's something that users may want at a glance)
• RoomCard - Allow alternate layouts, users may not just want a picture of the room but rather an icon / name layout
• History - include existing history information on all cards as popup similar to home assistant
• CalendarCard - I do have a plan to integrate this, just need more time or help :)

homeassistant hacs integration - an integration that behaves similar to the lovelace dashboard, drag & drop, resizing, fluid containers using react-grid-layoutd - storing the layouts inside home assistant, card picker for slots, would be a game changer! I would love some help with this part whilst im improving and adding cards / functionality

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.