Dialog

Preview

Installation

npx shadcn@latest add @cubby-ui/dialog

Usage

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/cubby-ui/dialog";

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    <DialogBody />
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Controlled

Manage dialog open state programmatically.

With Form

Include form elements within the dialog.

Scrollable Content

Handle long content with scrolling.

No Close Button

Hide the default close button.

Nested Dialogs

Stack multiple dialogs on top of each other.

Inset Footer

Use the inset variant for a muted footer background that extends to the dialog edges.

Detached Trigger

Place the trigger outside of the Dialog component using createDialogHandle().

Elements Outside Popup

Place elements visually outside the popup card while keeping them inside the popup component for accessibility (tab order, screen reader support). The popup uses pointer-events: none so backdrop clicks work, while inner content uses pointer-events: auto.

API Reference

The Dialog component is built on top of Base UI's Dialog. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Dialog documentation.

Props

DialogContent

Modal container with backdrop and centered positioning. Composes Dialog.Portal, Dialog.Backdrop, and Dialog.Popup. Props are forwarded to Dialog.Popup.

DialogBody

Scrollable content area within the dialog.