Radix UI vs shadcn/ui

import * as Dialog from '@radix-ui/react-dialog';

export function Modal({ trigger, children }) {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl p-6">
          {children}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

# Initialize
npx shadcn@latest init

# Add the components you need
npx shadcn@latest add button dialog form

# Components live in /components/ui — you own them
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent } from "@/components/ui/dialog"

export function MyModal({ open, onClose }) {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent>
        <Button onClick={onClose}>Close</Button>
      </DialogContent>
    </Dialog>
  );
}