Dialog

import {
  Dialog,
  DialogTrigger,
  DialogPortal,
  DialogBackdrop,
  DialogViewport,
  DialogPopup,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogFooter,
} from "@craftdotui/baseui/components/dialog";

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  
  <DialogPortal>
    <DialogBackdrop />
    <DialogViewport>
      <DialogPopup>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>
          This is the dialog description.
        </DialogDescription>
        
        <DialogFooter>
          <DialogClose>Close</DialogClose>
        </DialogFooter>
      </DialogPopup>
    </DialogViewport>
  </DialogPortal>
</Dialog>

<Dialog>
  <DialogTrigger>
    <Button>Delete Account</Button>
  </DialogTrigger>
  
  <DialogPortal>
    <DialogBackdrop />
    <DialogViewport>
      <DialogPopup>
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your account.
        </DialogDescription>
        
        <DialogFooter>
          <DialogClose>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button variant="destructive">Delete</Button>
        </DialogFooter>
      </DialogPopup>
    </DialogViewport>
  </DialogPortal>
</Dialog>

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  {/* ... */}
</Dialog>