Sections

Utilities

Dialog

A dialog for displaying content.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/dialog.json

Usage


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


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

Title and Description

<DialogHeader /> supports two usage patterns:

Using props

Pass title and description props directly to <DialogHeader />.

This approach does not require <DialogTitle /> or <DialogDescription /> components.


<DialogHeader title="Dialog Title" description="Dialog description" />

Using components

Alternatively, use <DialogTitle /> and <DialogDescription /> as children for more control.


<DialogHeader>
  <DialogTitle>Dialog Title</DialogTitle>
  <DialogDescription>Dialog description</DialogDescription>
</DialogHeader>

Examples

With Scroll

Use <DialogBody /> to make the content area scrollable while keeping header and footer fixed.

No Close Button

Use the showCloseButton prop to hide the close button in the top right corner.

Close behavior

Use closeOnInteractOutside and closeOnEscape props to prevent closing on outside click and escape.

Open a dialog imperatively from a menu item using the onClick handler.

Use modal={false} to allow interaction with elements outside the dialog. Disables focus trapping and scroll prevention.

Initial Focus

Use initialFocusEl to control which element receives focus when the dialog opens.

Nested

Nest dialogs within one another.

Custom spacing

Use [--space:--spacing("value")] on <DialogContent /> to adjust internal padding (default --spacing(6)).

API Reference

Dialog

Root context provider. Controls open state and modal behavior.

Prop	Type	Default
`open`	`boolean`	`-`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`({ open }: OpenChangeDetails) => void`	`-`
`modal`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`closeOnInteractOutside`	`boolean`	`true`
`initialFocusEl`	`() => MaybeElement`	`-`
`finalFocusEl`	`() => MaybeElement`	`-`
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	`-`
`onInteractOutside`	`(event: InteractOutsideEvent) => void`	`-`
`className`	`string`	`-`

DialogTrigger

Opens the dialog on click. Use asChild for custom trigger elements.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DialogContent

Holds the dialog panel. Supports size variants from sm to fullscreen.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "fullscreen"`	`"md"`
`showCloseButton`	`boolean`	`true`
`className`	`string`	`-`

Attribute	Default
`--space`	`--spacing(6)`

DialogHeader

Header area for title and description. Accepts props or children.

Prop	Type	Default
`title`	`string`	`-`
`description`	`string`	`-`
`className`	`string`	`-`

DialogBody

Scrollable body content. Uses ScrollArea for overflow.

Prop	Type	Default
`className`	`string`	`-`

DialogFooter

Footer area for action buttons.

Prop	Type	Default
`className`	`string`	`-`

DialogTitle

Accessible title for the dialog. Announced to screen readers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DialogDescription

Accessible description for the dialog. Announced to screen readers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DialogClose

Closes the dialog on click. Use asChild for custom close elements.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DialogOverlay

Dimmed overlay behind the dialog panel.

Prop	Type	Default
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.