Dialog

A modal dialog overlay with backdrop, header, content area, and footer. Built on Base UI's Dialog primitive with scroll locking and focus trapping.

$npx shadcn add @patchui/dialog

Basic

Without Close Button

Controlled (Destructive)

Usage

import {
  Button,
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@patchui/react";
 
<Dialog>
  <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here.
      </DialogDescription>
    </DialogHeader>
    <div className="p-6">
      {/* Content goes here */}
    </div>
    <DialogFooter>
      <DialogClose render={<Button variant="secondary" />}>
        Cancel
      </DialogClose>
      <DialogClose render={<Button />}>Save</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

DialogContent

Prop	Type	Default	Description
showCloseButton	boolean	true	Whether to render an X close button in the top-right corner.
className	string	-	Additional CSS classes applied to the dialog popup.

Compound Components

Component	Description
Dialog	Root component managing open/close state. Accepts open and onOpenChange for controlled usage.
DialogTrigger	Renders the element that opens the dialog. Use render prop for polymorphism.
DialogContent	Portal-rendered popup with backdrop, scroll lock, and focus trap.
DialogHeader	Flex column container for title and description (padding included).
DialogTitle	The dialog's heading text.
DialogDescription	Secondary description text below the title.
DialogPanel	Scrollable content area with padding.
DialogFooter	Footer area for action buttons. Stacks vertically on mobile.
DialogClose	Closes the dialog when clicked. Use render prop to style as a Button.

Notes

Scroll locking: The dialog automatically prevents body scrolling while open via react-remove-scroll.
Focus trapping: Focus is trapped inside the dialog and returned to the trigger when closed.
Backdrop dismiss: Clicking the backdrop closes the dialog by default.
Polymorphic triggers: Use render={<Button />} on DialogTrigger and DialogClose to render them as styled buttons.
Controlled usage: Pass open and onOpenChange to Dialog to control visibility programmatically.