/shadcn-ui

name: shadcn-ui
description: Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

shadcn/ui Component Patterns

Overview

Expert guide for building accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS. This skill provides comprehensive patterns for implementing production-ready components with full accessibility support.

Table of Contents

• [When to Use](#when-to-use)
• [Quick Start](#quick-start)
• [Installation & Setup](#installation--setup)
• [Project Configuration](#project-configuration)
• [Core Components](#core-components)
• [Button](#button-component)
• [Input & Form Fields](#input--form-fields)
• [Forms with Validation](#forms-with-validation)
• [Card](#card-component)
• [Dialog (Modal)](#dialog-modal-component)
• [Select (Dropdown)](#select-dropdown-component)
• [Sheet (Slide-over)](#sheet-slide-over-component)
• [Menubar & Navigation](#menubar--navigation)
• [Table](#table-component)
• [Toast Notifications](#toast-notifications)
• [Advanced Patterns](#advanced-patterns)
• [Customization](#customization)
• [Next.js Integration](#nextjs-integration)
• [Best Practices](#best-practices)
• [Common Component Combinations](#common-component-combinations)

When to Use

• Setting up a new project with shadcn/ui
• Installing or configuring individual components
• Building forms with React Hook Form and Zod validation
• Creating accessible UI components (buttons, dialogs, dropdowns, sheets)
• Customizing component styling with Tailwind CSS
• Implementing design systems with shadcn/ui
• Building Next.js applications with TypeScript
• Creating complex layouts and data displays

Instructions

1. **Initialize Project**: Run `npx shadcn@latest init` to configure shadcn/ui 2. **Install Components**: Add components with `npx shadcn@latest add <component>` 3. **Configure Theme**: Customize CSS variables in globals.css for theming 4. **Import Components**: Use components from `@/components/ui/` directory 5. **Customize as Needed**: Modify component code directly in your project 6. **Add Form Validation**: Integrate React Hook Form with Zod schemas 7. **Test Accessibility**: Verify ARIA attributes and keyboard navigation

Examples

Complete Form with Validation

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';

const formSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
});

export function LoginForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { email: '', password: '' },
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
        <FormField
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Login</Button>
      </form>
    </Form>
  );
}

Constraints and Warnings

• **Not an NPM Package**: Components are copied to your project; you own the code
• **Client Components**: Most components require "use client" directive
• **Radix Dependencies**: Ensure all @radix-ui packages are installed
• **Tailwind Required**: Components rely on Tailwind CSS utilities
• **TypeScript**: Designed for TypeScript projects; type definitions included
• **Path Aliases**: Configure @ alias in tsconfig.json for imports
• **Dark Mode**: Set up dark mode with CSS variables or class strategy

Quick Start

For new projects, use the automated setup:

# Create Next.js project with shadcn/ui
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npx shadcn@latest init

# Install essential components
npx shadcn@latest add button input form card dialog select

For existing projects:

# Install dependencies
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

# Initialize shadcn/ui
npx shadcn@latest init

What is shadcn/ui?

shadcn/ui is **not** a traditional component library or npm package. Instead:

• It's a **collection of reusable components** that you can copy into your project
• Components are **yours to customize** - you own the code
• Built with **Radix UI** primitives for accessibility
• Styled with **Tailwind CSS** utilities
• Includes CLI tool for easy component installation

Installation & Setup

Initial Setup

# Initialize shadcn/ui in your project
npx shadcn@latest init

During setup, you'll configure:

• TypeScript or JavaScript
• Style (Default, New York, etc.)
• Base color theme
• CSS variables or Tailwind CSS classes
• Component installation path

Installing Individual Components

# Install a single component
npx shadcn@latest add button

# Install multiple components
npx shadcn@latest add button input form

# Install all components
npx shadcn@latest add --all

Manual Installation

If you prefer manual setup:

# Install dependencies for a specific component
npm install @radix-ui/react-slot

# Copy component code from ui.shadcn.com
# Place in src/components/ui/

##