Dialog

Installation

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

npx shadcn@latest add https://prototyper-ui.com/r/dialog.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/dialog.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/dialog.json

This will add the following files to your project:

components/ui/dialog.tsx

Usage

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description.</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Anatomy

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    {/* your content */}
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>

Sub-component	`data-slot`	Purpose	Required
`Dialog`	`dialog`	Root provider, manages open/close state	Yes
`DialogTrigger`	`dialog-trigger`	Button that opens the dialog	Yes
`DialogPortal`	`dialog-portal`	Renders children into a portal	No
`DialogOverlay`	`dialog-overlay`	Backdrop behind the dialog	No
`DialogContent`	`dialog-content`	The dialog popup panel	Yes
`DialogHeader`	`dialog-header`	Flex container for title and description	No
`DialogTitle`	`dialog-title`	Accessible title for the dialog	Yes
`DialogDescription`	`dialog-description`	Accessible description for the dialog	No
`DialogFooter`	`dialog-footer`	Flex container for action buttons	No
`DialogClose`	`dialog-close`	Button that closes the dialog	No

Examples

Alert Dialog

Sheet

Styling

Data Slots

Use data-slot attributes to target specific parts of the dialog:

Slot name	Element
`dialog`	Root provider (no DOM element rendered)
`dialog-trigger`	The trigger button
`dialog-portal`	Portal wrapper
`dialog-overlay`	Backdrop overlay
`dialog-content`	The popup panel
`dialog-header`	Header container (title + description)
`dialog-title`	Title heading
`dialog-description`	Description paragraph
`dialog-footer`	Footer container (action buttons)
`dialog-close`	Close button(s)

Customization Examples

/* Make dialogs wider by default */
[data-slot="dialog-content"] {
  @apply sm:max-w-lg;
}

/* Custom overlay color */
[data-slot="dialog-overlay"] {
  @apply bg-black/30;
}

{/* Override width via className */}
<DialogContent className="sm:max-w-2xl">
  {/* ... */}
</DialogContent>

API Reference

Root component that manages open/close state.

Prop

Type

All Base UI Dialog.Root props are forwarded via ...props.

DialogTrigger

Button that opens the dialog when clicked.

Prop

Type

All Base UI Dialog.Trigger props are forwarded via ...props.

DialogContent

The popup panel rendered inside a portal with an overlay backdrop.

Prop

Type

All Base UI Dialog.Popup props are forwarded via ...props.

DialogHeader

Flex column container for title and description.

Prop

Type

All standard div props are forwarded via ...props.

DialogFooter

Flex row container for action buttons.

Prop

Type

All standard div props are forwarded via ...props.

DialogTitle

Accessible title for the dialog, rendered as a heading.

Prop

Type

All Base UI Dialog.Title props are forwarded via ...props.

DialogDescription

Accessible description rendered below the title.

Prop

Type

All Base UI Dialog.Description props are forwarded via ...props.

DialogClose

Button that closes the dialog when clicked.

All Base UI Dialog.Close props are forwarded via ...props.

DialogOverlay

Backdrop overlay behind the dialog.

Prop

Type

All Base UI Dialog.Backdrop props are forwarded via ...props.

DialogPortal

Renders children into a React portal.

All Base UI Dialog.Portal props are forwarded via ...props.

Accessibility

Keyboard Interactions

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

ARIA Attributes

DialogContent receives role="dialog" (or role="alertdialog" when used as an alert dialog).
aria-modal="true" is set when the dialog is modal.
aria-labelledby is automatically linked to DialogTitle.
aria-describedby is automatically linked to DialogDescription.
Focus is trapped inside the dialog while it is open.
Focus returns to the trigger element when the dialog closes.

Dialog

On this page