Dinachi

Dialog

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

View Source

#Installation

npx @dinachi/cli@latest add dialog

#Usage

tsx
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'

#Examples

Default Dialog

A basic dialog with header, form fields, and footer actions

Controlled Dialog

Dialog with controlled open state for confirmation flows

Dialog with Form

Dialog composing Input, Select, Radio, Checkbox, and Textarea. Uses portal={false} on SelectContent to keep the dropdown inside the modal focus trap.

#API Reference

PropTypeDefaultDescription
openboolean—The controlled open state of the dialog
onOpenChange(open: boolean) => void—Callback fired when the open state changes