Open a new window that can be either modal or non-modal and optionally rendered in a React portal. This component is based on the WAI-ARIA Dialog Pattern.

import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";
export default function Example() {
const [open, setOpen] = useState(false);
return (
<Ariakit.Button onClick={() => setOpen(true)} className="button">
Show modal
onClose={() => setOpen(false)}
<Ariakit.DialogHeading className="heading">
<p className="description">
Your payment has been successfully processed. We have emailed your
<Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>




Styling the backdrop

You can style all the backdrop elements using the [data-backdrop] selector:

[data-backdrop] {
background-color: hsl(0 0 0 / 0.1);

To style the backdrop of a specific dialog, use the backdrop prop:

<Dialog backdrop={<div className="backdrop" />} />

Scrollbar width

When the preventBodyScroll prop is set to true (default for modal dialogs), the scrollbar will be automatically hidden when the dialog is open. If your page contains position:fixed elements, you might need to modify their padding to compensate for the missing scrollbar width.

Ariakit automatically defines a --scrollbar-width CSS variable. You can apply this variable to adjust the padding-right of your fixed elements:

.header {
padding-right: calc(16px + var(--scrollbar-width, 0));


Modal dialogs are rendered at the end of the document using React Portal, which means they will be rendered on top of all other elements by default.

However, if you set the portal prop to false or use the z-index property on other elements, you might need to adjust the z-index of the dialog:

.dialog {
z-index: 100;

For more information on styling with Ariakit, refer to the Styling guide.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue