Dialog

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/dialog.tsx. Registry items that depend on it install it automatically.

components/ui/dialog.tsx

Usage

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

export function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline">Rename</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rename thread</DialogTitle>
          <DialogDescription>Visible to everyone in this workspace.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost">Cancel</Button>} />
          <DialogClose render={<Button>Save</Button>} />
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

API Reference

The parts wrap Base UI's Dialog primitives and accept their props.

Dialog

DialogProps

open ?: boolean: Controlled open state.
onOpenChange ?: (open: boolean) => void: Called when the open state changes, including Escape and backdrop clicks.
defaultOpen : boolean = false: Uncontrolled initial open state.

Parts

Part	Description
`DialogTrigger`	Opens the dialog; compose a control with `render`.
`DialogContent`	The centered panel at the dialog radius.
`DialogHeader`	Title and description stack.
`DialogFooter`	Right-aligned action row.
`DialogClose`	Wraps any control that should dismiss.