shadcn/ui Components

Overview

shadcn/ui provides beautifully designed, accessible components that you copy into your project. Components are not installed from npm - they're copied to your codebase for full customization.

Installation

Add a Component

npx shadcn@latest add <component>

# Examples:
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add form

Multiple Components

npx shadcn@latest add button card dialog

Available Components

Form Controls

• button - Buttons with variants (default, destructive, outline, secondary, ghost, link)
• input - Text input with consistent styling
• textarea - Multi-line text input
• select - Native select with custom styling
• checkbox - Checkbox with label support
• radio-group - Radio button groups
• switch - Toggle switches
• slider - Range slider
• form - Form with react-hook-form + zod validation

Overlays & Modals

• dialog - Modal dialogs
• alert-dialog - Confirmation dialogs
• sheet - Slide-out panels (top, right, bottom, left)
• popover - Floating content triggered by a button
• tooltip - Hover tooltips
• dropdown-menu - Accessible dropdown menus
• context-menu - Right-click context menus
• menubar - Horizontal menu bar
• command - Command palette (cmdk)

Data Display

• table - Styled tables
• card - Container with header, content, footer
• badge - Small status indicators
• avatar - User avatars with fallback
• separator - Visual divider
• aspect-ratio - Maintain aspect ratios
• scroll-area - Custom scrollbars
• collapsible - Expandable sections
• accordion - Multiple collapsible sections
• hover-card - Preview cards on hover

Navigation

• tabs - Tabbed interfaces
• navigation-menu - Complex navigation with submenus
• breadcrumb - Breadcrumb trails
• pagination - Page navigation

Feedback

• alert - Static alert messages
• toast / sonner - Toast notifications
• progress - Progress bars
• skeleton - Loading placeholders

Layout

• resizable - Resizable panels
• carousel - Image/content carousels

Usage Patterns

Basic Button

import { Button } from "@/components/ui/button"

<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
<Button variant="ghost">Menu</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Dialog

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

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description text</DialogDescription>
    </DialogHeader>
    {/* Content */}
  </DialogContent>
</Dialog>

Form with Validation

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"

const schema = z.object({
  email: z.string().email(),
})

function MyForm() {
  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>
          )}
        />
      </form>
    </Form>
  )
}

Customization

Components live in components/ui/. Modify directly:

• Change default variants in the component file
• Add new variants to the cva definitions
• Adjust Tailwind classes for styling
• Extend with additional props

Theming

shadcn uses CSS variables for theming. Modify in globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

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