Sections

Components

Utilities

Forms

Hooks

useIsMobile

Dialog

Copy Markdown

A dialog for displaying content.

Docs API

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/dialog

Anatomy#

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │ ├── DialogTitle
    │ └── DialogDescription
    ├── DialogBody
    └── DialogFooter
        └── DialogClose

Usage#

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

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    <DialogBody>
    </DialogBody>
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>

Controlled#

Use open and onOpenChange on the root to control the dialog state.

PreviewCode

Open ControlledOpen Uncontrolled

Title & Description#

DialogHeader supports two usage patterns:

Using props#

Pass title and description props directly to DialogHeader.

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

This approach does not require DialogTitle or DialogDescription components.

Using components#

Use DialogTitle and DialogDescription as children for more control.

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

Size#

Use the size prop on DialogContent to control the maximum width of the panel.

PreviewCode

smmdlgxl2xl3xl4xl5xl6xlfullscreen

Examples#

Scrollable#

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

PreviewCode

Open

No Close Button#

Use the showCloseButton={false} prop to hide the close button in the top right corner.

PreviewCode

Open

Close behavior#

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

PreviewCode

No close on outside clickNo close on Escape

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

PreviewCode

Open

Use modal={false} to allow interaction with elements outside the dialog.

PreviewCode

Open

Initial Focus#

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

PreviewCode

Open

Nested#

Nest dialogs within one another.

PreviewCode

Open

Custom spacing#

Use [--space:--spacing("value")] on DialogContent to adjust internal padding.

Default spacing is --spacing(6).

PreviewCode

Open

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

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"
`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.

[

Date Picker ](/docs/components/date-picker)[

Drawer ](/docs/components/drawer)

On This Page

Installation Anatomy Usage Controlled Title & Description Using props Using components Size Examples Scrollable No Close Button Close behavior Open from Menu Non-Modal Initial Focus Nested Custom spacing API Reference Dialog DialogTrigger DialogContent DialogHeader DialogBody DialogFooter DialogTitle DialogDescription DialogClose DialogOverlay