Dialog

Modal dialog on Base UI primitive — accessible, dismissible by ESC + backdrop.

stable

Rendered example — light + dark

Light

Dark

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

// One island per compound component — trigger + content share React state.
export default function ConfirmDialog() {
  return (
    <Dialog>
      <DialogTrigger render={<Button>Delete</Button>} />
      <DialogContent>
        <DialogTitle>Are you sure?</DialogTitle>
        This action cannot be undone.
      </DialogContent>
    </Dialog>
  );
}