Dialog

A modal window that overlays the main content, requiring user interaction before returning to the parent view.

#Installation

npx @dinachi/cli@latest add dialog

#Usage

tsx

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogViewport,
  DialogPopup,
  DialogBackdrop,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@/components/ui/dialog'

#Examples

#API Reference

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the dialog.
defaultOpen	boolean	false	The initial open state for uncontrolled usage.
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes.
modal	boolean \| 'trap-focus'	true	Whether the dialog is modal. Prevents background interaction and traps focus.
DialogPopup.initialFocus	boolean \| RefObject \| function	—	Element to focus when the dialog opens.
DialogPopup.finalFocus	boolean \| RefObject \| function	—	Element to focus when the dialog closes.