{"id":13579992,"url":"https://github.com/shannonhochkins/ha-component-kit","last_synced_at":"2026-03-02T05:08:02.348Z","repository":{"id":176715164,"uuid":"658540732","full_name":"shannonhochkins/ha-component-kit","owner":"shannonhochkins","description":"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. ","archived":false,"fork":false,"pushed_at":"2026-02-16T03:38:06.000Z","size":182550,"stargazers_count":1191,"open_issues_count":2,"forks_count":67,"subscribers_count":25,"default_branch":"master","last_synced_at":"2026-02-16T10:54:08.540Z","etag":null,"topics":["component","components","dashboard","hakit","home-assistant","homeassistant","homeassistant-custom-component","homeassistant-frontend","homeassistant-integration","hooks","react","react-components","react-redux","typescript","ui"],"latest_commit_sha":null,"homepage":"https://shannonhochkins.github.io/ha-component-kit/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shannonhochkins.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.buymeacoffee.com/jinglezzz"]}},"created_at":"2023-06-26T02:32:57.000Z","updated_at":"2026-02-16T03:38:10.000Z","dependencies_parsed_at":"2023-09-23T11:42:53.610Z","dependency_job_id":"f86b0e29-5e0c-426a-bb5f-44b978b1cf57","html_url":"https://github.com/shannonhochkins/ha-component-kit","commit_stats":null,"previous_names":["shannonhochkins/ha-component-kit"],"tags_count":45,"template":false,"template_full_name":null,"purl":"pkg:github/shannonhochkins/ha-component-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shannonhochkins%2Fha-component-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shannonhochkins%2Fha-component-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shannonhochkins%2Fha-component-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shannonhochkins%2Fha-component-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shannonhochkins","download_url":"https://codeload.github.com/shannonhochkins/ha-component-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shannonhochkins%2Fha-component-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29991465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","components","dashboard","hakit","home-assistant","homeassistant","homeassistant-custom-component","homeassistant-frontend","homeassistant-integration","hooks","react","react-components","react-redux","typescript","ui"],"created_at":"2024-08-01T15:01:45.659Z","updated_at":"2026-03-02T05:08:02.310Z","avatar_url":"https://github.com/shannonhochkins.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/jinglezzz"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"127\"\u003e\u003cimg src=\"https://cdn.discordapp.com/icons/1231534799248691252/4b6124f952f099f855b5186d8a68f33e.webp?size=100\" alt=\"LOGO\" \u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ch1\u003eHA COMPONENT KIT\u003c/h1\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"200\"\u003e\n        \u003ca aria-label=\"@HAKIT/CORE\" href=\"https://www.npmjs.com/package/@hakit/core\" width=\"250\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/@hakit/core.svg?style=for-the-badge\u0026labelColor=000000\u0026label=@hakit/CORE\" align=\"center\"\u003e\n  \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"250\"\u003e\u003ca aria-label=\"@HAKIT/COMPONENTS\" href=\"https://www.npmjs.com/package/@hakit/components\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/@hakit/components.svg?style=for-the-badge\u0026labelColor=000000\u0026label=@HAKIT/COMPONENTS\" align=\"center\"\u003e\n  \u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"210\"\u003e\u003ca aria-label=\"Join the community on Discord\" href=\"https://discord.com/invite/cGgbmppKJZ\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge\u0026logo=Discord\u0026labelColor=000000\u0026logoWidth=20\" align=\"center\"\u003e\n  \u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca aria-label=\"@HAKIT/CORE\" href=\"https://www.npmjs.com/package/@hakit/core\" width=\"250\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/dt/%40hakit%2Fcore.svg?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=Downloads\" align=\"top\"\u003e\n  \u003c/a\u003e\n    \u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\n    \u003ca aria-label=\"@HAKIT/COMPONENTS\" href=\"https://www.npmjs.com/package/@hakit/components\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/%40hakit%2Fcomponents.svg?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=Downloads\" alt=\"\" align=\"top\"\u003e\n  \u003c/a\u003e\n  \u003c/td\u003e\n  \u003ctd align=\"center\"\u003eJoin our community!\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Take Your [Home Assistant](https://www.home-assistant.io/) Dashboards to the Next Level 🚀\n\nDesigned 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!\n\n##### 🏠 **Ultimate Flexibility**: Create stunning, personalized dashboards tailored to your needs.\n##### ⚡ **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.\n##### 🌍 **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).\n##### 📅 **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.\n\nReady 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!\n\n\n## Demo\n\nVisit the [Demo](https://shannonhochkins.github.io/ha-component-kit/iframe.html?args=\u0026id=introduction-demo--demo\u0026viewMode=story) to try it out!\n\nIf you like anything here, be sure to 🌟 [the repo!](https://github.com/shannonhochkins/ha-component-kit)\n\n![DEMO](https://github.com/shannonhochkins/ha-component-kit/blob/master/stories/hakit-demo.gif?raw=true)\n\n### Documentation\n\nThere's extensive [documentation](https://shannonhochkins.github.io/ha-component-kit) which should give you all the information you need to get started!\n\n## Help me out?\n\nAs 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 :)\n\n\u003ca href=\"https://www.buymeacoffee.com/jinglezzz\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-red.png\" alt=\"Buy Me A Coffee\" style=\"height: 40px !important;width: auto !important;\" \u003e\u003c/a\u003e\n\n### Get Started\nThere's an npm create command which will setup react, typescript, vite \u0026 hakit automatically for you with a terminal wizard!\n\n```\n  npm create hakit@latest\n```\n\nOr, 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:\n```\n  npm install @hakit/core @hakit/components\n```\n\n### Home Assistant Addon (WIP)\nThere'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.\n\n\n### Supported Cards\n- [AlarmCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-alarmcard--docs)\n- [AreaCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-areacard--docs)\n- [ButtonCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-buttoncard--docs)\n- [ClimateCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-climatecard--docs)\n- [CameraCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-cameracard--docs)\n- [CalendarCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-calendarcard--docs)\n- [EntitiesCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-entitiescard--docs)\n- [FabCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-fabcard--docs)\n- [FamilyCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-familycard--docs)\n- [GarbageCollectionCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-garbagecollectioncard--docs)\n- [MediaPlayerCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-mediaplayercard--docs)\n- [PictureCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-picturecard--docs)\n- [SensorCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-sensorcard--docs)\n- [SidebarCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-sidebarcard--docs)\n- [TimeCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-timecard--docs)\n- [TriggerCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-triggercard--docs)\n- [WeatherCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-weathercard--docs)\n- [VacuumCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-vacuumcard--docs)\n\n### Known Issues\n- Anything else? Please, if you notice anything that doesn't feel / look right, please report it, i rely on user testing to make improvements.\n\n### What's next?\n\nThere's a Roadmap.md file with a few things i'm working on!\nHave your say! Join the [discord](https://discord.com/invite/cGgbmppKJZ) and let me know what you'd like to see next!\n\n### Contributors!\n\nI 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!\n\nThere's detailed instructions on how to get started if you want to introduce a new feature to the repository [here](CONTRIBUTING.md).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshannonhochkins%2Fha-component-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshannonhochkins%2Fha-component-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshannonhochkins%2Fha-component-kit/lists"}