radixUiDialog

import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
import { ModalManager, useModal, radixUiDialog, radixUiDialogContent } from "shadcn-modal-manager";

const MyModal = ModalManager.create(() => {
  const modal = useModal();

  return (
    <Dialog {...radixUiDialog(modal)}>
      <DialogContent {...radixUiDialogContent(modal)}>
        <DialogTitle>Edit Profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here.
        </DialogDescription>
        <button onClick={modal.dismiss}>Cancel</button>
        <button onClick={() => modal.close({ saved: true })}>Save</button>
      </DialogContent>
    </Dialog>
  );
});

const props = radixUiDialog(modal, options?);

const props = radixUiDialogContent(modal, options?);

interface AdapterOptions {
  disableClose?: boolean;
}

import {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
} from "@radix-ui/react-dialog";

const MyModal = ModalManager.create(() => {
  const modal = useModal();

  return (
    <Dialog {...radixUiDialog(modal)}>
      <DialogPortal>
        <DialogOverlay className="fixed inset-0 bg-black/50" />
        <DialogContent
          {...radixUiDialogContent(modal)}
          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg"
        >
          <DialogTitle>Modal Title</DialogTitle>
          <button onClick={modal.dismiss}>Close</button>
        </DialogContent>
      </DialogPortal>
    </Dialog>
  );
});

.dialog-overlay[data-state="open"] {
  animation: fadeIn 150ms ease-out;
}

.dialog-overlay[data-state="closed"] {
  animation: fadeOut 150ms ease-in;
}

.dialog-content[data-state="open"] {
  animation: slideIn 150ms ease-out;
}

.dialog-content[data-state="closed"] {
  animation: slideOut 150ms ease-in;
}