Component

Dialog

A modal dialog that interrupts the user with important content and expects a response.

shadcn/ui Extension

This component is an extension of the base shadcn/ui component with additional features like body section and overflow handling.

Preview

Component dialog not found in registry.

Installation

pnpm dlx shadcn@latest add "https://ui-registry.com/r/dialog.json"

Usage

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogBody>
      <p>Your content here...</p>
    </DialogBody>
    <DialogFooter>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Features

This is an enhanced version of the shadcn/ui Dialog component with additional features:

Body Section: Dedicated DialogBody component for main content
Overflow Management: Two scroll behaviors via scrollBehavior prop
Grid Layout: Uses CSS grid with grid-rows-[max-content_1fr_max-content]
Automatic Detection: Uses CSS :has() to detect header/footer presence
Fixed focus management: Proper focus trap and restoration
Scroll lock: Prevents background scrolling when dialog is open
Animation: Smooth enter/exit animations
Accessible: Full keyboard navigation and screen reader support

Scroll Behaviors

Body Scroll (default)

The dialog is fixed in the center and the body content scrolls within it.

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent scrollBehavior="body">
    <DialogHeader>
      <DialogTitle>Terms of Service</DialogTitle>
      <DialogDescription>
        Please read our terms carefully.
      </DialogDescription>
    </DialogHeader>
    <DialogBody>
      {/* Long scrollable content here */}
      <p>Lorem ipsum dolor sit amet...</p>
    </DialogBody>
    <DialogFooter>
      <Button variant="outline">Decline</Button>
      <Button>Accept</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Overlay Scroll

The overlay scrolls and the dialog is centered via CSS grid on the overlay. Useful for very long dialogs.

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent scrollBehavior="overlay">
    <DialogHeader>
      <DialogTitle>Privacy Policy</DialogTitle>
      <DialogDescription>
        Our privacy policy explains how we handle your data.
      </DialogDescription>
    </DialogHeader>
    <DialogBody>
      {/* Long content - entire dialog scrolls with overlay */}
      <p>Section 1...</p>
      <p>Section 2...</p>
    </DialogBody>
    <DialogFooter>
      <Button>I Understand</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API

Dialog

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`modal`	`boolean`	`true`	Whether to render as modal

DialogContent

Prop	Type	Default	Description
`scrollBehavior`	`"overlay" \| "body"`	`"body"`	Controls how overflow is handled
`className`	`string`	-	Additional CSS classes

DialogBody

The scrollable body section. When scrollBehavior="body", this element becomes scrollable.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Keyboard Interactions

Key	Description
`Escape`	Closes the dialog
`Tab`	Moves focus to next focusable element
`Shift + Tab`	Moves focus to previous focusable element

Sheet