shadcn/ui 3.3

Server Action Integration:

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

export async function UserCard({ user }) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete User</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This will permanently delete {user.name}.
          </DialogDescription>
        </DialogHeader>
        <form action={deleteUser}>
          <input type="hidden" name="userId" value={user.id} />
          <Button type="submit" variant="destructive">
            Confirm Delete
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  )
}

Issue #1: Tailwind Variables Not Applied

Symptom: Components unstyled or wrong colors in production

Cause: globals.css not imported or Tailwind config missing paths

// ❌ Wrong - Missing component paths
export default {
  content: ["./app/**/*.{ts,tsx}"],
}

// ✅ Right - Include all paths
export default {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
}

// app/layout.tsx - MUST import globals.css
import "./globals.css"

Issue #2: Dialog Won't Close in Server Components

Symptom: Dialog stays open after form submission

Cause: Radix UI needs "use client" for state management

// ❌ Wrong - Server Component with Dialog state
export default function UserForm({ user }) {
  const [open, setOpen] = useState(false) // Error!
  return <Dialog open={open}>...</Dialog>
}

// ✅ Right - Client Component wrapper
"use client"

export function UserFormDialog({ user }) {
  const [open, setOpen] = useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {/* Content */}
    </Dialog>
  )
}

Issue #3: Form Validation Errors Not Showing

Symptom: No error messages despite invalid data

Cause: Missing FormMessage component

// ❌ Wrong - No FormMessage
<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      {/* Missing FormMessage! */}
    </FormItem>
  )}
/>

// ✅ Right - Always include FormMessage
<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage /> {/* Required for errors */}
    </FormItem>
  )}
/>