shadcn/ui Cheat Sheet

# Create Next.js project (kalau belum ada)
npx create-next-app@latest my-app --typescript --tailwind --eslint
 
# Init shadcn/ui
npx shadcn@latest init
 
# Jawab pertanyaan:
# - Style: Default (atau New York)
# - Base color: Slate (atau pilih)

components/
  ui/              # shadcn components (di-copy ke project kamu)
lib/
  utils.ts         # cn() helper untuk merge classes
globals.css        # CSS variables buat theming
components.json    # Konfigurasi shadcn

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",

# Add single component
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
 
# Add multiple components
npx shadcn@latest add button card dialog input label

# Form components
npx shadcn@latest add button input label textarea
npx shadcn@latest add select checkbox radio-group switch
npx shadcn@latest add slider

import { Button } from "@/components/ui/button";
 
// Variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,

import { useForm } from "react-hook-form";
import { zodResolver } from

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
  DialogClose,
} from

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
 
function UserTable({ users

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,

import { toast } from "sonner";
 
// Basic toast
toast("Event has been created");
 
// Success
toast.success("Settings saved successfully!");
 
// Error

/* app/globals.css */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

// components/theme-provider.tsx
"use client";
import { ThemeProvider as NextThemesProvider } from "next-themes";

// components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        // Tambah custom variant
        success: "bg-green-600 text-white hover:bg-green-700"

import { cn } from "@/lib/utils";
 
// Merge Tailwind classes
<div className={cn("p-4 bg-white", isActive && "bg-blue-50 border-blue-200")}>
  Content
</div>
 
// Override default component styles
<Button

// shadcn/ui components adalah client components (pakai Radix)
// Di Next.js App Router, import di client component
 
// page.tsx (Server Component)
import { getUser } from "@/lib/actions";
import { ProfileCard } from "@/components/profile-card";
 
export default async

// Sidebar layout pattern
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import { Sidebar } from "@/components/sidebar";