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
Decision gist · record as of 2026-07-21
shadcn-ui helps you discover and install accessible React components into your project with full customization control. 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.
Use it when
- shadcn/ui uses a copy-paste model where components live in your codebase rather than in node_modules.
- shadcn/ui components use Tailwind CSS classes for styling and CSS variables for theming.
Verify before relying
Read SKILL.md below before installing (10 files). Open directory: indexed for reading, not audited.
Install
google-labs-code/stitch-skills/shadcn-ui · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Discover and install shadcn/ui components into a React project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Shadcn is a collection of accessible, copy-paste React components built on Tailwind CSS and Radix UI primitives. It includes form handling, dark mode support, pre-designed blocks, and an MCP server for safe component discovery and installation in Next.js projects.
Shadcn Setup configures shadcn/ui components with modern Tailwind v4 CSS-first setup, installing dependencies and generating the required globals.css, components.json, and utility files. It handles theme selection, component installation, and ensures proper v4 configuration without deprecated patterns.
Component Library generates fully-typed React components using shadcn/ui patterns, CVA variants, and Radix UI primitives—eliminating hours of hand-coding. Choose from form inputs, data tables, navigation, feedback overlays, and layout components, all with built-in accessibility, dark mode, and responsive design.
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
Shadcn Ui is a code generation platform that lets you copy component source directly into your project, giving you full ownership and customization. It combines Radix UI or Base UI primitives with Tailwind CSS 4, oklch theming, and React 19 patterns for building accessible interfaces. Use it to add components via CLI, configure dark mode, validate forms with Zod, or create custom component registries.
Shadcn provides copy-paste React components you own and control, built atop Radix UI for accessibility and styled with Tailwind CSS. Customize components freely while respecting design tokens for theme switching and preserving built-in accessibility features.
More skills Tailwind Design System (unlicensed) · tailwindcss-advanced-components (MIT) · shadcn (MIT) · shadcn-ui (MIT) · Frontend Ui Skill (unlicensed) · ui-components (MIT) · shadcn-component-review (MIT)