{"enrichment":{"faq":[{"a":"shadcn-ui initializes through a CLI-driven setup process. Run `npx shadcn-ui@latest init` to configure your project with Tailwind CSS and required dependencies. shadcn-ui will prompt you to choose your framework (React or Next.js), style preferences, and base color. Once initialized, you can install individual components on demand using `npx shadcn-ui@latest add [component-name]`. shadcn-ui copies component source code directly into your project, giving you full control over styling and behavior.","q":"How to set up shadcn-ui in a React or Next.js project?"},{"a":"shadcn-ui offers a comprehensive library including buttons, dialogs, forms, tables, toasts, selects, checkboxes, sheets, and charts. Install specific shadcn components via CLI: `npx shadcn-ui@latest add button` or `npx shadcn-ui@latest add dialog`. Each component is built on Radix UI primitives for accessibility and styled with Tailwind CSS. shadcn-ui copies the component code into your project's components directory, allowing you to customize styling and behavior without vendor lock-in.","q":"What components does shadcn-ui provide and how do you install them?"},{"a":"shadcn-ui integrates seamlessly with React Hook Form and Zod for robust form handling. Define a Zod schema for validation, then use `useForm` from React Hook Form with `zodResolver`. Combine shadcn-ui form components (Form, FormField, FormControl, FormMessage) with your schema to automatically handle validation errors and field state. shadcn-ui's form wrapper abstracts Radix UI primitives, making it simple to build accessible forms with real-time validation feedback.","q":"How do you build forms with React Hook Form and Zod validation in shadcn-ui?"},{"a":"shadcn-ui uses Tailwind CSS variables for theming, enabling light and dark mode support. Customize colors, spacing, and other design tokens by editing the CSS variables in your `globals.css` or theme configuration. shadcn-ui components reference these variables, so updating them automatically applies changes across all components. You can also modify individual component styles by editing the source files in your project, since shadcn-ui copies code rather than importing from a package.","q":"Can you customize shadcn-ui component themes and styling with Tailwind CSS?"},{"a":"shadcn-ui builds on Radix UI primitives, which implement WAI-ARIA standards for keyboard navigation, screen reader support, and focus management. Components like dialogs, dropdowns, and tables include built-in accessibility attributes. shadcn-ui ensures interactive patterns follow best practices for semantic HTML and ARIA roles. All shadcn-ui components are tested for accessibility compliance, making it straightforward to create inclusive, interactive layouts without additional accessibility work.","q":"What accessibility features does shadcn-ui provide for interactive UI patterns?"},{"a":"shadcn-ui supports dark mode through CSS variables defined in your global stylesheet. The init process configures light and dark color palettes. Toggle dark mode by adding the `dark` class to your root element, and shadcn-ui automatically applies the corresponding CSS variable values. Customize the theme by editing variables in `globals.css`\u2014shadcn-ui reads these values to style all components. This approach works with Next.js and React, providing seamless theme switching without additional libraries.","q":"How do you set up dark mode and customize themes in shadcn-ui?"}],"shadow_tags":["component-library","form-validation","accessible-ui","tailwind-theming","radix-primitives","data-visualization","modal-dialogs","react-hooks","typescript-safe","nextjs-ready"],"summary_rewrite":"shadcn-ui guides you through initializing the component library, installing individual components via CLI, and building forms with validation. It covers button variants, dialogs, tables, toasts, and charts styled with Tailwind CSS and CSS variables for custom theming."},"files":[{"bytes":11548,"path":"plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md","sha256":"e13702bb8ee2617b3e9fad759ed3d835adfe23bb1bbea8c06ea14e814896ee57","url":"https://skillfed.io/files/giuseppe-trisciuoglio/developer-kit/shadcn-ui/d49aa91a/SKILL.md"}],"id":"giuseppe-trisciuoglio/developer-kit/shadcn-ui","links":{"html":"https://skillfed.io/giuseppe-trisciuoglio/developer-kit/shadcn-ui","md":"https://skillfed.io/giuseppe-trisciuoglio/developer-kit/shadcn-ui.md","repo":"https://github.com/giuseppe-trisciuoglio/developer-kit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":37,"language":"Python","last_updated":"2026-06-22","license":"MIT","name":"shadcn-ui","publisher":"giuseppe-trisciuoglio","stars":311},"relations":{"similar":[{"id":"dirnbauer/webconsulting-skills/shadcn-ui"},{"id":"shep-ai/shep/shadcn-ui"},{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert"},{"id":"inertia-rails/skills/shadcn-inertia"},{"id":"inertia-rails/skills/shadcn-vue-inertia"},{"id":"gocallum/nextjs16-agent-skills/shadcn-skills"},{"id":"elophanto/EloPhanto/shadcn"},{"id":"bybren-llc/safe-agentic-workflow/frontend-patterns"},{"id":"binjuhor/shadcn-lar/ui-styling"}]},"slug":{"owner":"giuseppe-trisciuoglio","repo":"developer-kit","skill":"shadcn-ui"},"version":"d49aa91a"}