Animated Dialog

Animating a modal Dialog and its backdrop element using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.

Dialog Button Animated CSS transitions

Edit withVite Next.js

123456789101112131415161718192021222324252627282930
import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  const dialog = Ariakit.useDialogStore({ animated: true });
  return (
    <>
      <Ariakit.Button onClick={dialog.show} className="button">
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        store={dialog}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Success
        </Ariakit.DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </>
  );
}

import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  const dialog = Ariakit.useDialogStore({ animated: true });
  return (
    <>
      <Ariakit.Button onClick={dialog.show} className="button">
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        store={dialog}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Success
        </Ariakit.DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </>
  );
}

Styling

Use the data-enter and data-leave attributes to animate the dialog and the backdrop elements:

.backdrop {
  opacity: 0;
  transition: opacity 200ms;
}

.backdrop[data-enter] {
  opacity: 1;
}

.dialog {
  transform: scale(0.95);
  transition: transform 200ms;
}

.dialog[data-enter] {
  transform: scale(1);
}
.backdrop {
  opacity: 0;
  transition: opacity 200ms;
}

.backdrop[data-enter] {
  opacity: 1;
}

.dialog {
  transform: scale(0.95);
  transition: transform 200ms;
}

.dialog[data-enter] {
  transform: scale(1);
}

You can learn more about these data-* attributes on the Styling guide.

Related examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

View all examples

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue