shadcn-ui
✓Use when building React UIs with component libraries, implementing forms, dialogs, navigation, or data display. Use when user mentions shadcn, Radix UI, Base UI, or asks about accessible React components. Proactively suggest when building UI that would benefit from pre-built accessible components with Tailwind CSS styling.
Installation
SKILL.md
ShadCN/UI is a collection of beautifully-designed, accessible components built with TypeScript, Tailwind CSS, and headless UI primitives (Base UI or Radix UI). Unlike traditional component libraries, ShadCN uses a copy-paste model - components are copied into YOUR project, giving you full ownership and customization control.
Core Principle: You own the code. Components live in your project (typically src/components/ui/), not in nodemodules. This fundamentally changes how you think about customization - edit the source directly.
| Base UI | Prefer MUI ecosystem, need unstyled primitives with strong React patterns | | Radix UI | Want extensive primitive catalog, strong accessibility defaults |
Use when building React UIs with component libraries, implementing forms, dialogs, navigation, or data display. Use when user mentions shadcn, Radix UI, Base UI, or asks about accessible React components. Proactively suggest when building UI that would benefit from pre-built accessible components with Tailwind CSS styling. Source: akornmeier/claude-config.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/akornmeier/claude-config --skill shadcn-ui- Source
- akornmeier/claude-config
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-05
- Updated
- 2026-02-18
Quick answers
What is shadcn-ui?
Use when building React UIs with component libraries, implementing forms, dialogs, navigation, or data display. Use when user mentions shadcn, Radix UI, Base UI, or asks about accessible React components. Proactively suggest when building UI that would benefit from pre-built accessible components with Tailwind CSS styling. Source: akornmeier/claude-config.
How do I install shadcn-ui?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/akornmeier/claude-config --skill shadcn-ui Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/akornmeier/claude-config
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-05