1. Docs
  3. Components
  5. Dialog

Dialog

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

Docs

Installation

npx shadcn@latest add @kanpeki/dialog

Anatomy

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>

Examples

Scrollable

Alert Dialog

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.

Sheet

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

API Reference

Root

PropTypeDefault
defaultOpen
boolean
false
isOpen
boolean
false
onOpenChange
function

Content

PropTypeDefault
side
enum
"center"
role
enum
"dialog"
isBlurred
boolean
false
isDismissable
boolean
true
isKeyboardDismissDisabled
boolean
false
Date FieldForm