shadcn_skill

Overview

This skill helps teams add and customize accessible UI components using the latest shadcn/ui patterns. It focuses on modern defaults (new-york style, CSS variables) and encourages copying and owning components while leveraging Radix primitives for accessibility. Use it to install, configure, and implement components like Button, Dialog, Form, DataTable, and theme toggles.

How this skill works

The skill guides installation with npx shadcn@latest init and component addition via npx shadcn@latest add <component>. It provides ready-to-use component patterns, a cn() utility for conditional Tailwind merges, React Hook Form + Zod integrations, server-action examples, and a ThemeProvider + ThemeToggle pattern for dark mode. All examples assume up-to-date shadcn/ui and modern React patterns.

When to use it

• When adding UI components (Button, Card, Dialog, Form, Select, DataTable) to a Next.js app
• When you need accessible primitives built on Radix UI and consistent design tokens
• When implementing theme support and a dark mode toggle with next-themes
• When wiring forms with react-hook-form and zod or using server actions
• When you want conditional Tailwind class merging via the cn utility

Best practices

• Always run npx shadcn@latest to ensure the latest components and patterns
• Choose the new-york style and enable CSS variables for predictable theming
• Copy and own components—treat generated components as project source for customization
• Use Radix-based primitives for accessibility and keep animations CSS-based
• Prefer direct ref usage compatible with modern React over legacy forwardRef wrappers

Example use cases

• Install and add a Button and Dialog to a Next.js app using npx shadcn@latest add button dialog
• Create a ProfileForm with react-hook-form + zod using provided Form components and validation
• Add a ThemeToggle and ThemeProvider to enable class-based dark mode with next-themes
• Show toast notifications with sonner integrated into the app layout and components
• Build a responsive modal that uses Dialog on desktop and Sheet on mobile via a media query hook