GitHub

Go to...

Choose a page to open.

A window that opens over the page and blocks the content behind it.

Dialog

dialog-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/dialog.json

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename project</DialogTitle>
      <DialogDescription>
        The new name appears in the sidebar.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

DialogTrigger and DialogClose take a render prop. They do not support asChild.

Examples

Set showCloseButton={false} on DialogContent to hide the corner button. Set showCloseButton on DialogFooter to add a Close button there.

dialog-close-button