shadcn/ui Skill

Beautiful, accessible components built with Radix UI and Tailwind CSS. Copy and paste into your apps.

MCP Server Integration (PRIORITY)

ALWAYS check and use MCP server tools first:

# 1. Check availability
mcp__shadcn__get_project_registries

# 2. Search components
mcp__shadcn__search_items_in_registries
  registries: ["@shadcn"]
  query: "button"

# 3. Get examples
mcp__shadcn__get_item_examples_from_registries
  registries: ["@shadcn"]
  query: "button-demo"

# 4. Get install command
mcp__shadcn__get_add_command_for_items
  items: ["@shadcn/button"]

# 5. Verify implementation
mcp__shadcn__get_audit_checklist

Quick Start

Installation

# Initialize shadcn in your project
npx shadcn@latest init

# Add components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input

Project Structure

src/
├── components/
│   └── ui/           # shadcn components
│       ├── button.tsx
│       ├── card.tsx
│       └── input.tsx
├── lib/
│   └── utils.ts      # cn() utility
└── app/
    └── globals.css   # CSS variables

Key Concepts

Concept	Guide
Theming	reference/theming.md
Accessibility	reference/accessibility.md
Animations	reference/animations.md
Components	reference/components.md

Examples

Pattern	Guide
Form Patterns	examples/form-patterns.md
Data Display	examples/data-display.md
Navigation	examples/navigation.md
Feedback	examples/feedback.md

Templates

Template	Purpose
templates/theme-config.ts	Tailwind theme extension
templates/component-scaffold.tsx	Base component with variants
templates/form-template.tsx	Form with validation

Component Categories

Inputs

• Button, Input, Textarea, Select, Checkbox, Radio, Switch, Slider

Data Display

• Card, Table, Avatar, Badge, Calendar

Feedback

• Alert, Toast, Dialog, Sheet, Tooltip, Popover

Navigation

• Tabs, Navigation Menu, Breadcrumb, Pagination

Layout

• Accordion, Collapsible, Separator, Scroll Area

Theming System

CSS Variables

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... */
  }
}

Dark Mode Toggle

"use client";

import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { Moon, Sun } from "lucide-react";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}

Utility Function

// lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Common Patterns

Form with Validation

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

Toast Notifications

import { toast } from "sonner";

// Success
toast.success("Task created successfully");

// Error
toast.error("Something went wrong");

// With action
toast("Event created", {
  action: {
    label: "Undo",
    onClick: () => console.log("Undo"),
  },
});

Accessibility Checklist

• All interactive elements are keyboard accessible
• Focus states are visible
• Color contrast meets WCAG AA (4.5:1 for text)
• ARIA labels on icon-only buttons
• Form inputs have associated labels
• Error messages are announced to screen readers
• Dialogs trap focus and return focus on close
• Reduced motion preferences respected