Components
Dialog
A modal surface for focused decisions, confirmations, and short flows that should temporarily take over attention.
Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add dialog to your project.
watermelon add dialog2
Import the component
Import Dialog from your local UI registry output.
Import
import { Dialog } from "@/components/ui/dialog";Import
Import
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";Usage
Dialogs are a good fit for confirmations, destructive actions, and short task-focused flows.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| defaultOpen | boolean | false | Sets the initial open state for uncontrolled dialogs. |
| open | boolean | - | Controls the dialog from parent state. |
| onOpenChange | (open: boolean) => void | - | Called when the dialog opens or closes. |
| asChild | boolean | false | Allows trigger and close elements to wrap existing buttons. |