Skills
.Work. You
Rest

wrap-shadcn-component

Community

HA-ready wrappers for Shadcn UI

Software Engineering#typescript#frontend#component#registry#home-assistant#wrapper#ha
Authorjohnneerdael
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Converts a standard Shadcn/UI component into a Home Assistant-aware component. It handles entity binding, state mapping, and registry definition so that UI components can interact with HA data seamlessly.

Core Features & Use Cases

  • Entity binding: Use the HA entity via a wrapper that consumes useEntity.
  • State mapping: Map entity.state and entity.attributes to the UI component's value and display.
  • Registry integration: Provide a registry entry with fieldOverrides to enable the Entity Picker in the editor.

Quick Start

Create a wrapper at src/components/ha/ha-[component-name].tsx that imports the base Shadcn component and useEntity, binds to entityId, translates HA state to the component prop, and exports a registry entry with appropriate schema and fieldOverrides.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: wrap-shadcn-component
Download link: https://github.com/johnneerdael/status-banner-card/archive/main.zip#wrap-shadcn-component

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.