Dialog

A modal window that appears on top of the main content.

Installation


pnpm dlx shadcn@latest add @shark-ui/dialog

Usage


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


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

Title and Description

You can use <DialogHeader /> in two ways:

Using props

You can pass title and description props directly to <DialogHeader />. In this case, you don't need to use <DialogTitle /> and <DialogDescription /> components.


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

Using components

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


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

Examples

With ScrollArea

Make the content area scrollable while keeping header and footer fixed using ScrollArea.

No Close Button

Hide the close button in the top right corner by setting showCloseButton={false}.

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.

Confirmation

Intercept close attempts to show confirmation prompts, preventing data loss from unsaved changes.

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.

API Reference

Dialog

Root element of the dialog. Renders a div.

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

DialogTrigger

Button that opens the dialog. Renders a button.

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

DialogContent

Container for the dialog content. Renders a div.

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

DialogHeader

Header container for the dialog. Renders a div.

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

DialogBody

Content container for the dialog. Renders a div wrapped in a ScrollArea.

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

DialogFooter

Footer container for the dialog. Renders a div.

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

DialogTitle

Title element for the dialog. Renders an h2.

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

DialogDescription

Description element for the dialog. Renders a div.

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

DialogClose

Button that closes the dialog. Renders a button.

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

DialogOverlay

Backdrop overlay for the dialog. Renders a div.

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

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