A beautiful, fast, and modern React UI library for building accessible and customizable web applications with ease.
This modal uses the {placement} placement option. Try different
placements to see how the modal positions itself on the screen.
This modal uses the {variant} backdrop variant. Compare the
different visual effects: opaque provides full opacity, blur adds a backdrop
filter, and transparent removes the background.
{size === "cover" ? (
<>
This modal uses the cover size variant. It spans the full
screen with margins: 16px on mobile and 40px on desktop. Maintains rounded
corners and standard padding. Perfect for cover-style content that needs
maximum width while preserving modal aesthetics.
) : size === "full" ? (
<>
This modal uses the full size variant. It occupies the entire
viewport without any margins, rounded corners, or shadows, creating a true
fullscreen experience. Ideal for immersive content or full-page
interactions.
) : (
<>
This modal uses the {size} size variant. On mobile devices, all
sizes adapt to near full-width for optimal viewing. On desktop, each size
provides a different maximum width to suit various content needs.
)}
This backdrop features a sophisticated gradient that transitions from a dark color at the bottom to complete transparency at the top, combined with a smooth blur effect. The gradient automatically adapts its intensity for optimal contrast in both light and dark modes.
Controls whether the modal can be dismissed by clicking the overlay backdrop. Defaults to{" "}
true. Set to false to require explicit close action.
Clicking the backdrop won't close this modal
Try clicking outside this modal on the overlay - it won't close. You must use the close button or press ESC to dismiss it.
Controls whether the ESC key can dismiss the modal. When set to true, the ESC
key will be disabled and users must use explicit close actions.
ESC key is disabled
Press ESC - nothing happens. You must use the close button or click the overlay backdrop to dismiss this modal.
The simplest way to close a modal. Add slot="close" to any Button component
within the modal. When clicked, it will automatically close the modal.
Click either button below - both have slot="close" and will close
the modal automatically.
Access the close method from the Dialog's render props. This gives you full
control over when and how to close the modal, allowing you to add custom logic before
closing.
The buttons below use the close method from render props. You
can add validation or other logic before calling{" "}
renderProps.close().
Compare scroll behaviors - inside keeps content scrollable within the modal, outside allows page scrolling
Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam.
))}
Control the modal using React's useState hook for
simple state management. Perfect for basic use cases.
Status:{" "} {isOpen ? "open" : "closed"}
This modal is controlled by React's useState hook. Pass{" "}
isOpen and onOpenChange props to manage the modal state
externally.
Use the useOverlayState hook for a cleaner API
with convenient methods like open(), close(), and{" "}
toggle().
Status:{" "} {state.isOpen ? "open" : "closed"}
The useOverlayState hook provides dedicated methods for common
operations. No need to manually create callbacks—just use{" "}
state.open(), state.close(), or{" "}
state.toggle().
Fill out the form below and we'll get back to you. The modal adapts automatically when the keyboard appears on mobile.
Settings
Manage your preferences
Use Modal.Trigger to create custom trigger elements beyond standard
buttons. This example shows a card-style trigger with icons and descriptive text.
{description}
Render modals inside a custom container instead of document.body
Apply transform: translateZ(0) to the
container to create a new stacking context.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This modal has custom styling applied via Tailwind classes