Sections

Utilities

Forms

Hooks

useIsMobileNew

Dialog

A dialog for displaying content.

Installation


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>
      {/** your content here */}
    </DialogBody>
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>

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>

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 is --spacing(6).

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

Date Picker

Drawer