Components / Dialog

Dialog

A centered modal for focused content and small forms: renaming a post, editing settings, picking options. Blocking yes/no confirmations use AlertDialog instead.

import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@layers/ui/dialog'

Rendered stock

House rules

• Triggers attach via render={<Button />}; there is no asChild in the Base UI wrappers.
• DialogHeader, body content, and DialogFooter are direct children of DialogContent, which spaces them with a built-in grid gap. A form wraps only its fields; the submit button lives in the footer, linked via form={id}.
• Command inside a Dialog uses CommandInline, never raw Command.
• Never use stock Sheet for panel surfaces; inspectors are WindowSheet and canvas detail views are CanvasSheet.

See also

• Layouts: canvas and sheets