shadcn
✓This skill should be used when the user asks to "add a component", "use shadcn", "install Button", "create Dialog", "add Form", "use DataTable", "implement dark mode toggle", "use cn utility", or discusses UI components, component libraries, or accessible components. Always use the latest shadcn/ui version and modern patterns.
Installation
SKILL.md
This skill provides guidance for building interfaces with shadcn/ui, focusing on always using the latest version and modern patterns.
Philosophy: Copy and own your components. Use the new-york style. Leverage Radix UI primitives for accessibility.
| Style | new-york | default (deprecated) | | Toast | sonner | toast component | | Animation | CSS/tw-animate-css | tailwindcss-animate | | forwardRef | Direct ref prop (React 19) | forwardRef wrapper |
This skill should be used when the user asks to "add a component", "use shadcn", "install Button", "create Dialog", "add Form", "use DataTable", "implement dark mode toggle", "use cn utility", or discusses UI components, component libraries, or accessible components. Always use the latest shadcn/ui version and modern patterns. Source: velcrafting/codex-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/velcrafting/codex-skills --skill shadcn- Source
- velcrafting/codex-skills
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is shadcn?
This skill should be used when the user asks to "add a component", "use shadcn", "install Button", "create Dialog", "add Form", "use DataTable", "implement dark mode toggle", "use cn utility", or discusses UI components, component libraries, or accessible components. Always use the latest shadcn/ui version and modern patterns. Source: velcrafting/codex-skills.
How do I install shadcn?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/velcrafting/codex-skills --skill shadcn 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/velcrafting/codex-skills
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01