shadcn-ui
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.
shadcn-ui helps you set up and initialize the shadcn/ui component library in React or Next.js projects with CLI-based installation.
AI-generated summary based on this skill's SKILL.md
Install
giuseppe-trisciuoglio/developer-kit/shadcn-ui · repository language: Python
git clone https://github.com/giuseppe-trisciuoglio/developer-kit
cp -r developer-kit/plugins/developer-kit-typescript/skills/shadcn-ui ~/.claude/skills/shadcn-uinpx skillfed install giuseppe-trisciuoglio/developer-kit/shadcn-uiFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to set up shadcn-ui in a React or Next.js project?
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.
What components does shadcn-ui provide and how do you install them?
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.
How do you build forms with React Hook Form and Zod validation in shadcn-ui?
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.
Can you customize shadcn-ui component themes and styling with Tailwind CSS?
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.
What accessibility features does shadcn-ui provide for interactive UI patterns?
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.
How do you set up dark mode and customize themes in shadcn-ui?
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`—shadcn-ui reads these values to style all components. This approach works with Next.js and React, providing seamless theme switching without additional libraries.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui Component Patterns
Build accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.
Overview
- Components are copied into your project — you own and customize the code
- Built on Radix UI primitives for full accessibility
- Styled with Tailwind CSS and CSS variables for theming
- CLI-based installation:
npx shadcn@latest add <component>
When to Use
Activate when user requests involve: - "Set up shadcn/ui", "initialize shadcn", "add shadcn components" - "Install button/input/form/dialog/card/select/toast/table/chart" - "React Hook Form", "Zod validation", "form with validation" - "accessible components", "Radix UI", "Tailwind theme" - "shadcn button", "shadcn dialog",
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 12 files
plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/chart.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/charts-components.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/customization.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/forms-and-validation.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/learn.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/nextjs-integration.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/official-ui-reference.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/reference.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/setup-and-configuration.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/ui-components.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/ui-reference.md