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.

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.

Custom Props

DialogContent