Modal

<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

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>

Anatomy

Modal composes the full overlay stack for you, so basic usage is just <Modal>{children}</Modal>. For full control, import the parts and assemble them yourself.

import {
  ModalOverlay,
  ModalBackdrop,
  ModalViewport,
  ModalPanel,
} from '@/components/ui/modal'
;<ModalOverlay>
  <ModalBackdrop />
  <ModalViewport>
    <ModalPanel>{children}</ModalPanel>
  </ModalViewport>
</ModalOverlay>

ModalOverlay renders the overlay and holds the open state, ModalBackdrop dims the page, ModalViewport centers the modal, and ModalPanel is the panel that wraps the dialog content.

Open state

The trigger is Dialog: wrap a Button and the Modal in it and opening is handled for you. To control it, pass isOpen/defaultOpen and onOpenChange to the modal.

<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
  <DialogContent>Modal content</DialogContent>
</Modal>

Examples

API Reference

Modal

ModalOverlay

ModalBackdrop

ModalViewport

ModalContent