Modal

A modal displays content in a layer that overlays the page content.

On this page

Props

isDismissable

<Dialog>
  <Button>Open Modal</Button>
  <Modal>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogDescription>This is a modal description.</DialogDescription>
      </DialogHeader>
      <DialogBody>
        <p>Modal content goes here.</p>
      </DialogBody>
      <DialogFooter>
        <Button slot="close">Cancel</Button>
        <Button slot="close" variant="primary">
          Confirm
        </Button>
      </DialogFooter>
    </DialogContent>
  </Modal>
</Dialog>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/modal

Usage

Use modals to display content in a layer that overlays the page content.

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Modal } from '@/components/ui/modal'

<Dialog>
  <Button>Open Modal</Button>
  <Modal>
    <DialogContent>Modal content</DialogContent>
  </Modal>
</Dialog>

Examples

API Reference

A modal is an overlay element which blocks interaction with elements outside it.

Prop	Type	Default
	`boolean`	`—`
	`boolean`	`—`
	`Element`	`document.body`
	`boolean`	`false`
	`boolean`	`false`
	`ReactNode \| function`	`—`
	`function`	`—`

ModalOverlay

A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.

Prop	Type	Default
	`Element`	`document.body`
	`ReactNode \| function`	`—`
	`boolean`	`false`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`false`
	`function`	`—`

ModalBackdrop

The backdrop displayed behind the modal, which dims the underlying page content.

Supports all div attributes.

Prop	Type	Default

ModalViewport

The viewport container that centers the modal within the visible area of the screen.

Supports all div attributes.

Prop	Type	Default

ModalContent

The modal panel that contains the dialog content.

Prop	Type	Default
	`Element`	`document.body`
	`ReactNode \| function`	`—`
	`boolean`	`false`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`false`
	`function`	`—`

Last updated on 6/16/2026