shadcn-ui
shadcn/ui helps you integrate beautifully designed, accessible components into React applications by copying them directly into your codebase rather than installing a library. You get full control over styling and behavior while maintaining zero runtime overhead. The skill guides component discovery, installation, customization, and provides patterns for forms, dialogs, and data display.
shadcn-ui helps you discover and install accessible React components into your project with full customization control.
AI-generated summary based on this skill's SKILL.md
Install
google-labs-code/stitch-skills/shadcn-ui · repository language: TypeScript
git clone https://github.com/google-labs-code/stitch-skills
cp -r stitch-skills/plugins/stitch-build/skills/shadcn-ui ~/.claude/skills/shadcn-uinpx skillfed install google-labs-code/stitch-skills/shadcn-uiFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I install shadcn/ui components into my React project?
shadcn/ui components are installed by copying them directly into your codebase rather than as a library dependency. Run the CLI init command to set up your project configuration, then use `npx shadcn-ui@latest add [component-name]` to add individual components. shadcn/ui handles the setup of required dependencies like Radix UI and Tailwind CSS, giving you full control over the component code in your project.
What is the shadcn/ui copy-paste approach and why use it?
shadcn/ui uses a copy-paste model where components live in your codebase rather than in node_modules. This approach gives you complete control over styling, behavior, and updates—you own the code. shadcn/ui eliminates runtime overhead, reduces bundle bloat, and lets you customize components without fighting library constraints. You can modify any component to match your exact design system needs.
How do I customize shadcn/ui component styling and theming with Tailwind CSS?
shadcn/ui components use Tailwind CSS classes for styling and CSS variables for theming. Customize colors, spacing, and typography by editing the CSS variables in your theme configuration file. Since shadcn/ui components live in your codebase, you can directly modify Tailwind classes in component files. Dark mode is built-in through CSS variables—configure it in your Tailwind config to toggle between light and dark themes seamlessly.
Can shadcn/ui help me build forms, dialogs, and data tables?
shadcn/ui provides pre-built components for forms, dialogs, and data tables with accessibility and validation built in. Use the Form component with React Hook Form for form validation, the Dialog component for modals, and the Table component for data display. shadcn/ui also offers Blocks—pre-composed templates like login and dashboard layouts—to accelerate common UI patterns while maintaining full customization.
What are shadcn/ui best practices for component integration and architecture?
shadcn/ui best practices include organizing components in a dedicated folder, keeping custom modifications minimal to ease future updates, and leveraging Radix UI primitives for accessibility. Use TypeScript for type safety, compose components to build complex UIs, and follow the design system's spacing and color conventions. Regularly review shadcn/ui updates and test responsive behavior across devices to maintain consistency.
How do I troubleshoot shadcn/ui setup, imports, and dependency issues?
shadcn/ui setup issues often stem from missing Tailwind CSS configuration or incorrect path aliases. Verify your `tsconfig.json` or `jsconfig.json` includes the correct path alias for components. Ensure Tailwind CSS is installed and configured in your project. If imports fail, check that the component file exists in your codebase after running the add command. Clear node_modules and reinstall if dependency conflicts occur.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui Component Integration
You are a frontend engineer specialized in building applications with shadcn/ui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.
Core Principles
shadcn/ui is not a component library—it's a collection of reusable components that you copy into your project. This gives you: - Full ownership: Components live in your codebase, not node_modules - Complete customization: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives - No version lock-in: Update components selectively at your own pace - Zero runtime overhead: No library bundle, just the code you need
Component Discovery and Installation
1. Browse
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 10 files
plugins/stitch-build/skills/shadcn-ui/README.md
plugins/stitch-build/skills/shadcn-ui/SKILL.md
plugins/stitch-build/skills/shadcn-ui/examples/auth-layout.tsx
plugins/stitch-build/skills/shadcn-ui/examples/data-table.tsx
plugins/stitch-build/skills/shadcn-ui/examples/form-pattern.tsx
plugins/stitch-build/skills/shadcn-ui/resources/component-catalog.md
plugins/stitch-build/skills/shadcn-ui/resources/customization-guide.md
plugins/stitch-build/skills/shadcn-ui/resources/migration-guide.md
plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md
plugins/stitch-build/skills/shadcn-ui/scripts/verify-setup.sh