Dialog

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/dialog

UsageCopy Anchor Link

import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>Open</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <DialogPanel>Content</DialogPanel>
    <DialogFooter>
      <DialogClose render={<Button variant="ghost" />}>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>;

Always include a DialogTitle. Screen readers use it as the dialog's name.

Bare footerCopy Anchor Link

variant="bare" removes the footer's border and background.

Scrollable contentCopy Anchor Link

DialogPanel scrolls when the content is taller than the screen, and keeps the header and footer in view.

Confirm before closingCopy Anchor Link

Control open and check for unsaved input in onOpenChange. This example opens an Alert Dialog before discarding a draft.

API referenceCopy Anchor Link

Built on Base UI Dialog. Every part accepts the props of its Base UI counterpart. DialogPopup is also exported as DialogContent.

DialogPopupCopy Anchor Link

DialogFooterCopy Anchor Link

DialogPanelCopy Anchor Link

DialogHeader, DialogFooter, and DialogPanel accept a render prop to swap the element they render.