Implements accessible, themeable UI components using Radix UI primitives and Tailwind CSS styling patterns.
This skill equips Claude with deep expertise in the shadcn/ui ecosystem, enabling it to generate, refactor, and maintain production-grade React components. It covers core utilities like cn(), complex class-variance-authority (CVA) logic, the asChild pattern for polymorphic components, and modern CSS techniques such as data-slot attributes and :has() selectors. It serves as a comprehensive guide for developers building consistent design systems that leverage Radix UI's power with Tailwind's flexibility.
Key Features
01Modern CSS targeting with data-slot and :has() selectors
0214 GitHub stars
03Accessible component patterns using Radix UI primitives
04Compound component architecture and state management
05CVA-driven variant management for complex UI states
06Polymorphic rendering implementation with the asChild pattern
Use Cases
01Refactoring legacy styles into modern CVA-powered design systems
02Building custom, reusable UI libraries from scratch
03Implementing accessible dialogs, forms, and navigation components
