<Dialog>
<Button>Open modal</Button>
<Modal>
<DialogContent>modal content</DialogContent>
</Modal>
</Dialog>npx shadcn@latest add @dotui/modalUse 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>Use the controls below to experiment with different modal props and see the live preview and code update.
<Dialog>
<Button>Open Modal</Button>
<Modal isDismissable>
<DialogContent>
<DialogHeader>
<DialogHeading>Modal Title</DialogHeading>
<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>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 | — | ||
((element: Element) => boolean) | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.