{"enrichment":{"faq":[{"a":"shadcn/ui requires initializing your project with its CLI tool. Run `npx shadcn-ui@latest init` to configure Tailwind CSS, set up your component directory, and establish the base configuration. shadcn/ui will prompt you to choose your preferred styling approach and component path, then generate necessary configuration files for your React or Next.js project.","q":"How do I set up shadcn/ui in my React project?"},{"a":"After running the init command, shadcn/ui lets you add individual components via `npx shadcn-ui@latest add [component-name]`. Each component is copied into your project as source code you own, built on Radix UI primitives and styled with Tailwind CSS. This approach gives you full control over component behavior and styling without managing a dependency.","q":"What's the shadcn/ui component library installation guide?"},{"a":"shadcn/ui integrates seamlessly with React Hook Form for form state management. Use shadcn/ui's Form component wrapper alongside React Hook Form's useForm hook, then add Zod for schema validation. This combination provides type-safe form handling with built-in error display, validation feedback, and accessible form fields.","q":"How do I build forms with shadcn/ui and React Hook Form?"},{"a":"shadcn/ui uses CSS variables for theming, allowing you to customize colors, spacing, and other design tokens globally. Modify the variables in your CSS file or Tailwind config to change component appearance across your entire application. shadcn/ui also supports dark mode through CSS variable overrides, enabling seamless theme switching.","q":"How can I customize shadcn/ui components with CSS variables?"},{"a":"shadcn/ui's Dialog component is built on Radix UI's Dialog primitive, providing built-in accessibility features like focus management, keyboard navigation, and ARIA attributes. Simply use the Dialog, DialogTrigger, and DialogContent components to create accessible modal dialogs that follow WAI-ARIA standards without additional configuration.","q":"How do I create accessible dialogs with shadcn/ui?"},{"a":"shadcn/ui works seamlessly with Next.js App Router and TypeScript. Run the init command in your Next.js project, select TypeScript support, and configure your component directory. shadcn/ui automatically generates type-safe components that work with Next.js server and client components, enabling full-stack type safety in your application.","q":"What's the best way to integrate shadcn/ui into Next.js with TypeScript?"}],"shadow_tags":["component-library","form-validation","accessible-ui","tailwind-styling","radix-primitives","design-system","typescript-support","next-js-ready","dark-mode-theming","cli-tooling"],"summary_rewrite":"This skill guides you through initializing shadcn/ui, installing individual components, and configuring your project with Radix UI primitives and Tailwind CSS. Learn to build forms with validation, customize themes, and implement production-ready accessible components you own and control."},"files":[{"bytes":40862,"path":".claude/skills/shadcn-ui/SKILL.md","sha256":"45d5ec34510f3c486215cfe1d64842eb6495ce13ca279c7106cf83f6b352ff0e","url":"https://skillfed.io/files/shep-ai/shep/shadcn-ui/ec1cf2fb/SKILL.md"}],"id":"shep-ai/shep/shadcn-ui","links":{"html":"https://skillfed.io/shep-ai/shep/shadcn-ui","md":"https://skillfed.io/shep-ai/shep/shadcn-ui.md","repo":"https://github.com/shep-ai/shep"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":52,"language":"TypeScript","last_updated":"2026-07-28","license":"MIT","name":"shadcn-ui","publisher":"shep-ai","stars":239},"relations":{"similar":[{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"giuseppe-trisciuoglio/developer-kit/shadcn-ui"},{"id":"dirnbauer/webconsulting-skills/shadcn-ui"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert"},{"id":"bybren-llc/safe-agentic-workflow/frontend-patterns"},{"id":"gocallum/nextjs16-agent-skills/shadcn-skills"},{"id":"binjuhor/shadcn-lar/ui-styling"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"},{"id":"mrgoonie/claudekit-skills/ui-styling"},{"id":"elophanto/EloPhanto/shadcn"}]},"slug":{"owner":"shep-ai","repo":"shep","skill":"shadcn-ui"},"version":"ec1cf2fb"}