Dialog

A modern, accessible modal dialog (popup) component with animated 3D transitions. Useful for overlays, confirmations, forms, and any UI that needs to appear above your app content.
Inspired by modern design patterns and delightful UI.

Live Preview

Installation

You can install the Dialog component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/dialog.json

Import

To use the Dialog component, import it in your code:

typescript-icon
1import { Dialog } from '@/components/Dialog';

Props

PropTypeDefaultDescriptionRequired
React.ReactNode–The content to render inside the dialog modal.true
React.ReactNode–Custom element to trigger the dialog (optional).false
boolean–Control open state from outside (advanced/controlled mode).false
(open: boolean) => void–Setter for controlled dialog open state.false
string–Custom class name for dialog surface.false
typescript-icon
1
2type DialogProps = {
3  children: React.ReactNode;
4  trigger?: React.ReactNode;
5  isOpen?: boolean;
6  className?: string;
7  setIsOpen?: (open: boolean) => void;
8};
9

Example usage

Basic

typescript-icon
1<Dialog>
2  <h2 className="text-xl font-bold">Dialog Title</h2>
3  <p>This is the content of the dialog.</p>
4</Dialog>

With custom surface style

typescript-icon
1<Dialog className="bg-neutral-100 dark:bg-neutral-950 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4">
2  <h2 className="text-xl font-bold">Quartz UI</h2>
3  <p>This is a dialog component with 3D enter and exit animations. You can easily use this component in your project by simply copy and pasting or using our CLI.</p>
4  <div className="flex justify-end mt-6">
5    <button className="dark:bg-neutral-100 hover:bg-neutral-800 transition-colors cursor-pointer dark:hover:bg-neutral-200 dark:text-neutral-950 text-white bg-neutral-950 px-4 py-2 rounded-md text-sm font-semibold">Learn more</button>
6  </div>
7</Dialog>

Custom trigger

Use the trigger prop to use any element as the open button.

typescript-icon
1<Dialog
2  trigger={
3    <button className="rounded-lg bg-blue-500 px-4 py-2 text-sm font-semibold text-white">
4      Open Custom Dialog
5    </button>
6  }
7  className="bg-neutral-100 dark:bg-neutral-950 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4">
8  <h2 className="text-xl font-bold">Custom Trigger</h2>
9  <p>This is a dialog component with 3D enter and exit animations. You can easily use this component in your project by simply copy and pasting or using our CLI.</p>
10  <div className="flex justify-end mt-6">
11    <button className="dark:bg-neutral-100 hover:bg-neutral-800 transition-colors cursor-pointer dark:hover:bg-neutral-200 dark:text-neutral-950 text-white bg-neutral-950 px-4 py-2 rounded-md text-sm font-semibold">Learn more</button>
12  </div>
13</Dialog>

Features

  • Animated 3D transitions: Dialog animates in and out with depth and blur for a modern UI feel.
  • Backdrop support: Clicking the backdrop closes the dialog.
  • Keyboard accessible: Press Escape to close.
  • Custom content: Any React elements can be placed inside.
  • Custom trigger: Use your own button or element to open the dialog.
  • Controlled or uncontrolled: Manage open state yourself, or let Dialog do it.

Customization

  • Surface style: Pass className prop to style the dialog background and border.
  • Dialog size: Change content container or surface classes as needed.
  • Transitions: Edit the motion props in the component for advanced animations.
  • Trigger behavior: Use the trigger prop for custom open buttons or UI.

Troubleshooting

  • If you see no animation, ensure motion.dev is installed and properly imported.
  • If the dialog does not open, check that your trigger element works and setIsOpen is called.
  • If the rest of the page scrolls when dialog is open, verify that the component is mounted in a React client context.
  • If customizing behavior, be careful with ref forwarding and event handlers on the dialog surface.