dotUI

Modal

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

Overview

Examples

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

Installation

npm

pnpm

yarn

bun

pnpm dlx 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>

Playground

Use the controls below to experiment with different modal props and see the live preview and code update.

isDismissable

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

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`	`—`
	`((element: Element) => boolean)`	`—`

dotUI

Modal

Installation

Usage

Playground

API Reference

On this page

On this page

dotUI

Product

Community

Support