shadcn
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
shadcn/ui delivers accessible React components you copy into your codebase for complete ownership and control.
AI-generated summary based on this skill's SKILL.md
Install
bobmatnyc/claude-mpm-skills/shadcn · repository language: Python
git clone https://github.com/bobmatnyc/claude-mpm-skills
cp -r claude-mpm-skills/toolchains/ui/components/shadcn ~/.claude/skills/shadcnnpx skillfed install bobmatnyc/claude-mpm-skills/shadcnFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are shadcn/ui react components and how do they work?
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation. You own the code, so you can modify styling, behavior, and structure to match your exact needs without waiting for library updates.
How do I set up shadcn/ui with Tailwind CSS in my project?
shadcn/ui requires Tailwind CSS to be already configured in your project. Once Tailwind is set up, you use the shadcn CLI to initialize shadcn/ui by running `npx shadcn-ui@latest init`. This command configures your project structure and creates a components directory. After initialization, you can add individual components using `npx shadcn-ui@latest add [component-name]`, which copies the component code directly into your project.
Can I copy paste React components from shadcn/ui into my codebase?
Yes—copying and pasting components is the core design philosophy of shadcn/ui. Rather than treating it as a traditional npm package dependency, you use the CLI to add components, which copies their source code into your project. This approach gives you complete ownership and control. You can then customize the copied code directly without needing to override styles or wait for upstream changes.
How does shadcn/ui handle dark mode and theme customization?
shadcn/ui components support dark mode through Tailwind CSS's built-in dark mode utilities. Since you own the component code, you can customize colors, spacing, and other design tokens by editing the copied files directly or by modifying your Tailwind configuration. This transparency means you can create theme variants and adjust styling to match your brand without fighting against library constraints.
How do I build forms with validation using shadcn/ui and react-hook-form?
shadcn/ui provides form components (Form, Input, Textarea, Select, Checkbox, etc.) that integrate seamlessly with react-hook-form. You combine shadcn's form components with react-hook-form's controller and validation logic, often using Zod for schema validation. Since shadcn components are copied into your project, you can customize form styling and behavior directly while leveraging react-hook-form's powerful validation and state management.
What accessibility features does shadcn/ui include?
shadcn/ui components are built on Radix UI primitives, which provide robust accessibility foundations including keyboard navigation, ARIA attributes, and screen reader support. Features include proper focus management, semantic HTML, and accessible dialog/menu interactions. Since the component code is transparent and owned by you, you can audit and enhance accessibility further if needed for your specific use case.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui - Component Library
progressive_disclosure: entry_point: summary, when_to_use, quick_start estimated_tokens: entry: 85 full: 4800
Summary
shadcn/ui is a collection of re-usable React components built with Radix UI primitives and styled with Tailwind CSS. Unlike traditional component libraries, shadcn/ui components are copied directly into your project, giving you full ownership and customization control. Components are accessible, customizable, and open source.
Core Philosophy: Copy-paste components, not npm packages. You own the code.
When to Use
**Use
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
toolchains/ui/components/shadcn/SKILL.md
toolchains/ui/components/shadcn/metadata.json