{"enrichment":{"faq":[{"a":"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.","q":"How do I install shadcn/ui components into my React project?"},{"a":"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\u2014you 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.","q":"What is the shadcn/ui copy-paste approach and why use it?"},{"a":"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\u2014configure it in your Tailwind config to toggle between light and dark themes seamlessly.","q":"How do I customize shadcn/ui component styling and theming with Tailwind CSS?"},{"a":"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\u2014pre-composed templates like login and dashboard layouts\u2014to accelerate common UI patterns while maintaining full customization.","q":"Can shadcn/ui help me build forms, dialogs, and data tables?"},{"a":"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.","q":"What are shadcn/ui best practices for component integration and architecture?"},{"a":"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.","q":"How do I troubleshoot shadcn/ui setup, imports, and dependency issues?"}],"shadow_tags":["headless-ui-framework","copy-paste-components","tailwind-css-integration","radix-primitives","design-system-building","accessible-components","react-ui-toolkit","theme-customization","component-composition"],"summary_rewrite":"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."},"files":[{"bytes":9207,"path":"plugins/stitch-build/skills/shadcn-ui/SKILL.md","sha256":"2ddfe599ac2ba631ca019f7b6e37ee5df9cd34f83fc016f6ea9d4ba5bbfa0304","url":"https://skillfed.io/files/google-labs-code/stitch-skills/shadcn-ui/491f5527/SKILL.md"}],"id":"google-labs-code/stitch-skills/shadcn-ui","links":{"html":"https://skillfed.io/google-labs-code/stitch-skills/shadcn-ui","md":"https://skillfed.io/google-labs-code/stitch-skills/shadcn-ui.md","repo":"https://github.com/google-labs-code/stitch-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":964,"language":"TypeScript","last_updated":"2026-07-21","license":"Apache-2.0","name":"shadcn-ui","publisher":"google-labs-code","stars":7830},"relations":{"similar":[{"id":"elophanto/EloPhanto/shadcn"},{"id":"Bbeierle12/Skill-MCP-Claude/component-library"},{"id":"existential-birds/beagle/shadcn-ui"},{"id":"shipshitdev/skills/shadcn-setup"},{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"shep-ai/shep/shadcn-ui"},{"id":"ScientiaCapital/skills/frontend-ui-skill"},{"id":"yonatangross/orchestkit/ui-components"}]},"slug":{"owner":"google-labs-code","repo":"stitch-skills","skill":"shadcn-ui"},"version":"491f5527"}