Skip to Content
DocumentationRegistry

Registry

The Modal component is available as a shadcn/ui registry component. This provides a pre-built Modal wrapper that integrates react-easy-modals with shadcn’s Dialog component.

Installation

Choose the version that matches your shadcn setup:

Radix (default shadcn)

npx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/modal.json

Base UI (nested modals support)

npx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/modal-baseui.json

Note: The Base UI version supports nested modals out of the box with proper animation handling.

Usage

Simply replace Dialog with Modal in your imports:

- import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+ import { Modal, ModalContent, ModalHeader, ModalTitle } from "@/components/ui/modal"

No more DialogTrigger - just use modals.open() anywhere in your application:

- <Dialog>
-   <DialogTrigger asChild>
-     <Button>Open</Button>
-   </DialogTrigger>
-   <DialogContent>...</DialogContent>
- </Dialog>
+ const modals = useModals()
+ <Button onClick={() => modals.open(MyModal)}>Open</Button>

Example

Here’s a simple confirm modal using the registry component:

import { ModalProps, ModalProvider, useModals } from "react-easy-modals";
import {
  Modal,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
} from "@/components/ui/modal";
import { Button } from "@/components/ui/button";
 
type ConfirmModalReturnType = "confirm" | "cancel";
 
function ConfirmModal({ close }: ModalProps<ConfirmModalReturnType>) {
  return (
    <Modal>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Confirm Action</ModalTitle>
          <ModalDescription>
            "Are you sure you want to proceed?
          </ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <Button variant="outline" onClick={() => close("cancel")}>
            Cancel
          </Button>
          <Button onClick={() => close("confirm")}>Confirm</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}
 
function App() {
  const modals = useModals();
 
  const handleClick = async () => {
    const result = await modals.open(ConfirmModal);
    if (result === "confirm") {
      // User confirmed
    }
  };
 
  return <Button onClick={handleClick}>Open Modal</Button>;
}

Nested Modals

For nested modals , the react-easy-modals nested API works perfectly with Base UI’s nested dialogs .

To use nested modals, you must install shadcn with base-ui component library.

Nested ModalsModalProvider