Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/dialog

Anatomy

Single import

Multiple imports

import { Button } from "~/components/ui/button";
import { Dialog } from "~/components/ui/dialog";

<Dialog.Root>
  <Button>Trigger</Button>

  <Dialog.Overlay>
    <Dialog.Modal>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title />
          <Dialog.Description />
        </Dialog.Header>

        <Dialog.Footer>
          <Button slot="close" />
        </Dialog.Footer>

        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Modal>
  </Dialog.Overlay>
</Dialog.Root>;

Use the role="alertdialog" prop on the <Dialog.Content> element to make an alert dialog. Also, make sure to set the isDismissable prop to false on the <Dialog.Overlay> or <Dialog.Modal> to prevent the dialog from being dismissed by clicking outside of it.

Preview

Code

Sheet

Use the side prop on the <Dialog.Modal> element to make a sheet dialog.

Component dialog-sheet-demo not found in registry.

API Reference

Dialog.Root

Prop	Type	Default
`children`	`ReactNode`
`isOpen`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`function`

Dialog.Overlay

Prop	Type	Default
`children`	`ReactNode`
`isBlurred`	`boolean`	`false`
`isDismissable`	`boolean`	`true`
`isKeyboardDismissDisabled`	`boolean`
`className`	`string`

Dialog.Modal

Prop	Type	Default
`children`	`ReactNode`
`isDismissable`	`boolean`	`true`
`isKeyboardDismissDisabled`	`boolean`
`className`	`string`

Dialog.Content

Prop	Type	Default
`children`	`ReactNode`
`role`	`enum`	`"dialog"`
`className`	`string`

Dialog.Header

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Dialog.Title

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Dialog.Description

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Dialog.Footer

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Dialog.Close

Prop	Type	Default
`className`	`string`

Date Field Field

On This Page

Installation
Anatomy
Examples
Scrollable
Alert Dialog
Sheet
API Reference
Dialog.Root
Dialog.Overlay
Dialog.Modal
Dialog.Content
Dialog.Header
Dialog.Title
Dialog.Description
Dialog.Footer
Dialog.Close

Contribute