shadcn-ui Expert

shadcn-ui is a collection of beautifully-designed, accessible React components built with TypeScript, Tailwind CSS, and Radix UI primitives. This skill guides you through component selection, implementation, customization, and best practices.

Quick Start

Installation

First, initialize shadcn-ui in your project:

npx shadcn-ui@latest init

This creates a components.json file for configuration. Choose your framework:

• Next.js (App Router recommended)
• Vite
• Remix
• Astro
• Laravel
• Gatsby
• React Router
• TanStack Router/Start

Installing Components

Use the CLI to install individual components:

# Install a button component
npx shadcn-ui@latest add button

# Install form components
npx shadcn-ui@latest add form input select checkbox

# Install a data table
npx shadcn-ui@latest add data-table

Or ask me directly to "add a login form" - I can use the MCP server to handle installation with natural language.

Component Categories

Form & Input Components

Use for: Data collection, user input, validation

• form - Complex forms with React Hook Form
• input - Text fields
• textarea - Multi-line text
• select - Dropdown selections
• checkbox - Boolean inputs
• radio-group - Single selection from options
• switch - Toggle boolean states
• date-picker - Date selection
• combobox - Searchable select with autocomplete

Layout & Navigation

Use for: App structure, navigation flows, content organization

• sidebar - Collapsible side navigation
• tabs - Tabbed content
• accordion - Collapsible sections
• breadcrumb - Navigation path
• navigation-menu - Dropdown menus
• scroll-area - Custom scrollable regions

Overlays & Dialogs

Use for: Modals, confirmations, floating content

• dialog - Modal dialogs
• alert-dialog - Confirmation prompts
• drawer - Mobile-friendly side panels
• popover - Floating popovers
• tooltip - Hover information
• dropdown-menu - Menu dropdowns
• context-menu - Right-click menus

Data Display

Use for: Showing structured data

• table - Basic HTML tables
• data-table - Advanced tables with sorting/filtering/pagination
• avatar - User profile images
• badge - Status labels
• card - Content containers

Feedback & Status

Use for: User feedback, loading states, alerts

• alert - Alert messages
• toast - Notifications
• progress - Progress bars
• skeleton - Loading placeholders
• spinner - Loading indicators

Component Selection Guide

Ask yourself these questions to choose the right component:

1. What is the user interacting with?

   • Text input → use input
   • Choosing from options → use select or combobox
   • Yes/no decision → use checkbox or switch
   • Multiple fields → use form

2. How should it be displayed?

   • Inline with other content → input, select
   • Centered on screen → dialog
   • Slide from side → drawer
   • Information tooltip → tooltip

3. What's the context?

   • Inside a form → use field component with form
   • Standalone button → use button
   • Inside a table → use table row cell or data-table

4. Does it need validation?

   • Yes → combine form + field + React Hook Form
   • No → use simple components (input, select)

Common Implementation Patterns

Basic Form with Validation

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

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

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

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="[email protected]" {...field} />
              </FormControl>
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

Dialog Pattern

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export function DeleteDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle><