Dialog

A lighter, fully composable sibling to Modal. Modal is a single-prop, fixed-width, always-shadowed dialog with a forced close button. Dialog is the shadcn-style compound API — no forced width or shadow, and you build the header/footer yourself.

<Dialog roughness={1.5}>
  <DialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename sketch</DialogTitle>
      <DialogDescription>Give this notebook page a new title.</DialogDescription>
    </DialogHeader>
    <Input defaultValue="Field notes" />
    <DialogFooter>
      <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
      <DialogClose asChild><Button variant="primary">Save</Button></DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

CLI install

npx doodleui-react add dialog

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Button,
  Input,
} from "doodleui-react";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename sketch</DialogTitle>
      <DialogDescription>Give this notebook page a new title.</DialogDescription>
    </DialogHeader>
    <Input defaultValue="Field notes" />
    <DialogFooter>
      <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
      <DialogClose asChild><Button variant="primary">Save</Button></DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Reach for Modal when you want a single all-in-one prop API; reach for Dialog when you need full control over the layout, or a smaller centered prompt.

Props