Best React Modal and Dialog Components (2026): 10 Libraries Compared

Mantine Modal is the most complete free React modal: stacked modals, an official manager that opens confirm dialogs from code, fullscreen, inside scrolling and documented SSR behaviour. Chakra UI Dialog matches it on API breadth, with an overlay manager, nested dialogs and a documented non-modal mode. Ant Design Modal is still the quickest way to build Modal.confirm() flows in antd apps. PrimeReact Dialog has the richest layout options (nine positions, dragging, maximize), under the PrimeUI License. For Bootstrap apps, React Bootstrap Modal and CoreUI CModal both go fullscreen below a breakpoint with a single prop, and neither supports nested modals.

How we compared

In October 2026 we compared ten React modal components on a 23-feature checklist covering behaviour, layout and API, using current releases: @mantine/core 9.7.4, @chakra-ui/react 3.37.0, @mui/material 9.5.0, antd 6.6.8, @heroui/react 3.2.6, the shadcn/ui registry with @radix-ui/react-dialog 1.3.1, primereact 11.2.2, react-bootstrap 2.10.10, react-modal 3.16.3 and @coreui/react 5.13.1.

Each cell comes from the vendor’s documentation, its published source code or its public demos. A ❌ for a competitor means the vendor’s own docs state the limit. Where the docs are silent the table shows —, which does not mean the feature is missing. CoreUI publishes this page; its ❌ entries come from our own docs and source.

The comparison at a glance

✅ built in and documented · Partial = a composition or example, an external package, or only part of the behaviour · ❌ confirmed absent (vendor docs, or for CoreUI our own source) · — no data

The libraries, one by one

Mantine Modal

Mantine Modal covers the checklist with props: size from xs to xl (or auto), fullScreen, centered with x and y offsets, inside scrolling with an optional ScrollArea, closeOnClickOutside, lockScroll and keepMounted. Modal.Stack manages z-index and closing so only the top modal reacts, and the official @mantine/modals package adds modals.open(), modals.openConfirmModal(), context modals and closeAll(). The docs explain how its portal behaves during server rendering. A fullscreen switch for small screens is shown with useMediaQuery rather than a breakpoint prop.

Choose it if you want everything, including imperative confirm dialogs, in one MIT ecosystem.

Chakra UI Dialog

Chakra UI Dialog (v3, built on Ark UI and Zag.js) offers sizes from xs to full plus cover (responsive values allowed), top, center or bottom placement, inside or outside scrolling, motion presets, nested dialogs and a documented non-modal mode. The Overlay Manager (createOverlay) opens dialogs from code and can return a value when they close. lazyMount and unmountOnExit are on by default. Confirmations use the declarative Alert Dialog example, and for a draggable window Chakra points to its separate Floating Panel.

Choose it if you want a flexible API with an overlay manager and responsive sizes.

MUI Dialog

MUI Dialog offers scroll="paper" or "body", maxWidth from xs to xl with fullWidth, fullScreen, keepMounted, and a documented server-side rendering approach with disablePortal. Confirmation dialogs, non-modal dialogs and dragging are demos or third-party compositions; for promise-style confirms MUI’s docs point to the external material-ui-confirm package. A responsive fullscreen dialog is a useMediaQuery composition, and other positions need style overrides.

Choose it if your app is on Material UI; it is the most predictable dialog in that stack.

Ant Design Modal

Ant Design Modal is built for application flows: Modal.confirm, info, success, warning and error, Modal.useModal() and App.useApp() return handles you can update or destroy, and returning a Promise from onOk keeps the dialog open until it settles. Width accepts a responsive breakpoint object (since 5.23.0), centered and style.top position it, and loading shows a skeleton (5.18.0). Ant Design 6 renamed several props (mask.closable, destroyOnHidden), worth knowing when upgrading.

Choose it if your product is built on antd and needs lots of imperative dialogs.

HeroUI Modal

HeroUI Modal is built on React Aria and offers sizes from xs to full plus cover, auto, center, top or bottom placement, inside or outside scrolling, custom animations through data attributes, and a Next.js integration guide. AlertDialog covers confirmations declaratively; useOverlayState gives open() and close(), but the modal must still be declared in the tree. The custom portal container prop is marked UNSTABLE_.

Choose it if you are on HeroUI and want a dialog that matches its design system.

shadcn/ui Dialog

shadcn/ui Dialog is code you copy, wrapping Radix Dialog. It supports a non-modal mode (modal={false}), scrollable content with a sticky header and an optional sticky footer, a custom portal container, and forceMount for keeping content in the DOM. Width comes from the sm:max-w-lg class you edit, and full screen on mobile is usually the separate Drawer or Sheet. Confirmation is the separate, declarative Alert Dialog, which has its own size prop.

Choose it if you use shadcn/ui and are happy to own the component code.

PrimeReact Dialog

PrimeReact Dialog has the richest layout options here: nine positions, draggable with keepInViewport, a maximize button, inside or outside scrolling and a non-modal example. createOverlayManager opens dialogs from code. Version 11 changed a lot: the migration guide says “There is no ConfirmDialog component and no confirmDialog() service”, and the resizable prop is gone. Width is set with classes rather than named sizes, and the Next.js guide uses PrimeSSRProvider and a licence key.

Choose it if you need draggable, positioned dialogs and accept the PrimeUI licence.

React Bootstrap Modal

React Bootstrap Modal (2.10.10, on @restart/ui) offers size sm, lg or xl, centered, scrollable, and fullscreen values such as md-down that make it fullscreen only below a breakpoint. backdrop="static" blocks outside clicks and animation={false} turns transitions off. The docs are explicit about stacking: “Bootstrap only supports one modal window at a time. Nested modals aren’t supported”. Note that the default React Bootstrap docs now show the 3.0 beta, while npm latest is 2.10.10.

Choose it if you build on Bootstrap and want a lightweight modal.

CoreUI CModal

Our own entry. CoreUI Modal for React is free (MIT) in @coreui/react. It offers backdrop="static" with an onClosePrevented event, a scrollable body, sm, lg and xl sizes, fullscreen always or only below a breakpoint (sm to xxl), vertical centering, a portal with a custom container, unmountOnClose, and animation you can restyle with SCSS variables or switch off with transition={false}.

What it lacks: our docs state that “multiple modals cannot be opened at the same time”, there is no API to open a modal from code, no ready confirm dialog, no non-modal mode and no dragging, and SSR is not covered in the docs.

Choose it if your app uses CoreUI or Bootstrap and you want responsive fullscreen without extra code. Commercial components such as Smart Table are in CoreUI PRO.

react-modal

react-modal is an unstyled, single-component library: isOpen, onRequestClose, overlay-click closing, a configurable parent container and --after-open and --before-close classes with closeTimeoutMS for your own transitions. Everything visual (size, position, header and footer) is your CSS. The last release, 3.16.3, was published on 17 December 2024.

Choose it if you need a minimal behaviour layer for a fully custom design and accept slow maintenance.

What changed in 2026

• PrimeReact 11 moved to the PrimeUI License and removed ConfirmDialog and the resizable prop. The 10.x line (10.9.9) is still MIT and still has ConfirmDialog.
• Ant Design 6 (6.6.8, October 2026) renamed modal props: maskClosable became mask.closable (6.3.0) and destroyOnClose became destroyOnHidden (5.25.0).
• React Bootstrap’s default docs now document the 3.0 beta; use the v2 docs for 2.10.10.
• react-modal has gone about 22 months without a release.

FAQ

How do I open a confirm dialog from code in React?

Ant Design has Modal.confirm() and Modal.useModal(), Mantine has modals.openConfirmModal() in @mantine/modals, Chakra UI has createOverlay, and PrimeReact 11 has createOverlayManager. CoreUI, React Bootstrap and shadcn/ui are declarative only.

Can I open a modal from another modal in React Bootstrap or CoreUI?

Not officially. React Bootstrap’s docs say nested modals aren’t supported, and CoreUI’s docs say multiple modals cannot be open at the same time. Mantine (Modal.Stack), Chakra UI and Ant Design support nesting.

Which React modal can be dragged?

PrimeReact Dialog has a built-in draggable prop. MUI and Ant Design show dragging through react-draggable, and Chakra UI offers a separate Floating Panel component.

Which React modals go fullscreen only on small screens?

React Bootstrap (fullscreen="md-down" and similar) and CoreUI (fullscreen="md" and other breakpoints) do it with one prop. MUI and Mantine document a useMediaQuery composition, and Chakra UI accepts responsive size values.

Is PrimeReact Dialog still free?

PrimeReact 11 uses the PrimeUI License: free only for companies under $1M revenue, five developers, ten employees and $3M funding (confirmed yearly), otherwise $599 per developer until 31 December 2026, then $799. PrimeReact 10.9.9 remains MIT.