Dialog

A modal window overlaid on the page. The surface rises to the top of the stack while a backdrop dims everything below.

tsx

import { Button } from "@/registry/seam/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from "@/registry/seam/ui/dialog"

export default function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline">Edit profile</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile. The surface rises to the top of the
            stack; the page dims behind it.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost">Cancel</Button>} />
          <DialogClose render={<Button>Save</Button>} />
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

bunx --bun @seamui/cli@latest add dialog

API

Prop	Type	Default	Description
showClose	boolean	true	Renders the corner close button inside DialogContent; false removes it.
open	boolean	—	Controlled open state, forwarded to Base UI's Root.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open, eventDetails) => void	—	Called when the open state changes.

Dialog forwards all other Base UI Root props; DialogContent forwards Popup props.

Notes

Traps focus while open, restores it on close, and locks page scroll.
Dismisses on Escape and backdrop click.
aria-labelledby / aria-describedby are wired from DialogTitle / DialogDescription.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.