dotUI

Dialog

A dialog is an overlay shown above other content in an application.

Docs
<Dialog>
  <Button>
    <PenSquareIcon /> Create issue
  </Button>
  <Overlay>
    <DialogContent>
      <DialogHeader>
        <DialogHeading>Create a new issue</DialogHeading>
        <DialogDescription>
          Report an issue or create a feature request.
        </DialogDescription>
      </DialogHeader>
      <DialogBody>
        <TextField aria-label="Title" autoFocus>
          <Input placeholder="Title" className="w-full" />
        </TextField>
        <TextField aria-label="Title" autoFocus>
          <TextArea
            aria-label="Description"
            placeholder="description"
            className="w-full"
          />
        </TextField>
      </DialogBody>
      <DialogFooter>
        <Button slot="close">Cancel</Button>
        <Button slot="close" variant="primary">
          Save changes
        </Button>
      </DialogFooter>
    </DialogContent>
  </Overlay>
</Dialog>

Installation

pnpm dlx shadcn@latest add @dotui/dialog

Usage

Use dialog to grab the user's attention for critical tasks, like confirming actions, providing additional details, or capturing input.

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogHeading,
} from "@/components/ui/dialog";
import { Overlay } from "@/components/ui/overlay";
<Dialog>
  <Button>Open dialog</Button>
  <Overlay>
    <DialogContent>
      <DialogHeader>
        <DialogHeading>Dialog Title</DialogHeading>
        <DialogDescription>Dialog description</DialogDescription>
      </DialogHeader>
      <DialogBody>Content</DialogBody>
      <DialogFooter>
        <Button slot="close">Close</Button>
      </DialogFooter>
    </DialogContent>
  </Overlay>
</Dialog>

Playground

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

API Reference

Dialog

A DialogTrigger opens a dialog when a trigger element is pressed.

PropType

DialogContent

A dialog is an overlay shown above other content in an application.

PropType
ReactNode | function

DialogHeader

Missing description.

Supports all header attributes.

DialogHeading

Missing description.

PropType
union
string
string

DialogDescription

Missing description.

PropType
union
string
string

DialogBody

Missing description.

Supports all div attributes.

DialogFooter

Missing description.

Supports all footer attributes.

On this page

On this page

Last updated on 12/21/2025

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.