{"enrichment":{"faq":[{"a":"shadcn/ui lets you copy accessible React components directly into your project. Start by running the CLI installer, which sets up Tailwind CSS v4 and path aliases. Then use the CLI to add individual components\u2014shadcn/ui copies the source code into your project rather than installing as a package dependency, giving you full control over customization and styling.","q":"How to use shadcn/ui in my React project?"},{"a":"shadcn/ui is a collection of accessible, customizable React components built on Radix UI and Tailwind CSS. Unlike traditional component libraries, shadcn/ui uses a copy-paste approach\u2014you own the component code in your project. This means you can modify components freely, avoid vendor lock-in, and maintain full TypeScript support without external package dependencies for individual components.","q":"What is shadcn/ui and how does it differ from other libraries?"},{"a":"shadcn/ui setup requires Tailwind CSS v4 and path aliases configured in your project. Run the official CLI installer, which automatically handles configuration. The installer sets up your `components.json` file, configures your Tailwind paths, and prepares your project structure. After setup, you can add components via CLI commands and customize them to match your design system.","q":"How do I set up and configure shadcn/ui?"},{"a":"Yes\u2014shadcn/ui components are fully customizable. Since you copy component code into your project, you can modify styling, behavior, and appearance directly. shadcn/ui supports theming through Tailwind CSS, including dark mode support. You can adjust colors, spacing, typography, and component logic to fit your design requirements without waiting for library updates.","q":"Can shadcn/ui components be themed and customized?"},{"a":"shadcn/ui provides a growing collection of components including buttons, forms, dialogs, dropdowns, tables, and more\u2014all built on Radix UI primitives. Browse the full component library and examples on the official shadcn/ui website. Each component includes interactive examples, source code, and accessibility details. Documentation covers installation, setup, customization, and best practices for TypeScript projects.","q":"What shadcn/ui components are available and where's the documentation?"},{"a":"shadcn/ui components are built on Radix UI, ensuring strong accessibility foundations with ARIA attributes and keyboard navigation. Dark mode is supported through Tailwind CSS class-based theming\u2014configure it in your Tailwind config and toggle the dark class on your root element. Since you control the component code, you can further customize accessibility and theming to meet your project's specific requirements.","q":"Does shadcn/ui support dark mode and accessibility?"}],"shadow_tags":["component-library","ui-framework","react-toolkit","tailwind-integration","design-system","frontend-tooling","copy-paste-components","accessibility-first"],"summary_rewrite":"shadcn/ui provides a collection of accessible, customizable React components built on Radix UI and Tailwind CSS that you copy directly into your project. Install components via CLI, configure with Tailwind v4 and path aliases, and customize them to fit your design needs."},"gist":{"api_url":"https://skillfed.io/api/skills/EnderPuentes/ai-agent-skills/shadcn-ui.json","as_of":"2026-06-23","description":"shadcn/ui helps you add accessible React components to your project using Tailwind CSS and Radix UI. npx skillfed install EnderPuentes/ai-agent-skills/shadcn-ui","install":{"manual":["git clone https://github.com/EnderPuentes/ai-agent-skills","cp -r ai-agent-skills ~/.claude/skills/shadcn-ui"],"primary":"npx skillfed install EnderPuentes/ai-agent-skills/shadcn-ui","version":"9d0454c2"},"kind":"skill","mirror_url":"https://skillfed.io/EnderPuentes/ai-agent-skills/shadcn-ui.md","similar":[{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling","name":"ui-styling","publisher":"nextlevelbuilder/ui-ux-pro-max-skill","url":"https://skillfed.io/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert","name":"Shadcn Ui Expert","publisher":"MajesteitBart/TalentMatcher","url":"https://skillfed.io/MajesteitBart/TalentMatcher/shadcn-ui-expert"},{"id":"bobmatnyc/claude-mpm-skills/shadcn","name":"shadcn","publisher":"bobmatnyc/claude-mpm-skills","url":"https://skillfed.io/bobmatnyc/claude-mpm-skills/shadcn"},{"id":"eyadsibai/ltk/react-artifacts","name":"React Artifacts","publisher":"eyadsibai/ltk","url":"https://skillfed.io/eyadsibai/ltk/react-artifacts"},{"id":"shep-ai/shep/shadcn-ui","name":"shadcn-ui","publisher":"shep-ai/shep","url":"https://skillfed.io/shep-ai/shep/shadcn-ui"}],"title":"Shadcn Ui by EnderPuentes: Find and integrate shadcn/ui components into my React project \u2014 SkillFed","use":{"when":["shadcn/ui is a collection of accessible, customizable React components built on Radix UI and Tailwind CSS.","shadcn/ui setup requires Tailwind CSS v4 and path aliases configured in your project."]},"what":{"lead":"shadcn/ui helps you add accessible React components to your project using Tailwind CSS and Radix UI primitives.","rest":"shadcn/ui provides a collection of accessible, customizable React components built on Radix UI and Tailwind CSS that you copy directly into your project. Install components via CLI, configure with Tailwind v4 and path aliases, and customize them to fit your design needs."}},"id":"EnderPuentes/ai-agent-skills/shadcn-ui","install":{"mode":"external","repo":"https://github.com/EnderPuentes/ai-agent-skills"},"links":{"html":"https://skillfed.io/EnderPuentes/ai-agent-skills/shadcn-ui","md":"https://skillfed.io/EnderPuentes/ai-agent-skills/shadcn-ui.md","repo":"https://github.com/EnderPuentes/ai-agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":null,"last_updated":"2026-06-23","license":null,"name":"Shadcn Ui","publisher":"EnderPuentes","stars":0},"relations":{"similar":[{"id":"binjuhor/shadcn-lar/ui-styling"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"},{"id":"mrgoonie/claudekit-skills/ui-styling"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert"},{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"eyadsibai/ltk/react-artifacts"},{"id":"shep-ai/shep/shadcn-ui"},{"id":"joyehuang/Learn-Open-Harness/shadcn"},{"id":"julianromli/ai-skills/shadcn"},{"id":"laguagu/claude-code-nextjs-skills/shadcn"}]},"slug":{"owner":"EnderPuentes","repo":"ai-agent-skills","skill":"shadcn-ui"},"version":"9d0454c2"}