Dialog

Modal dialog with overlay, escape key, and click-outside to close.

Preview

Confirm Action

Are you sure you want to continue? This action cannot be undone.

Installation

npx drivn add dialog

Usage

1 import { Dialog } from "@/components/ui/dialog"
2 import { Button } from "@/components/ui/button"
3 
4 export default function Page() {
5   return (
6     <Dialog>
7       <Dialog.Trigger>Open Dialog</Dialog.Trigger>
8       <Dialog.Content title="Confirm Action">
9         <Dialog.Close />
10         <p>Are you sure you want to continue?</p>
11         <Button>Confirm</Button>
12       </Dialog.Content>
13     </Dialog>
14   )
15 }

API Reference

Dialog

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state. Omit for uncontrolled mode.
`onOpenChange`	(open: boolean) => void	—	Callback fired when the dialog open state changes
`children`	ReactNode	—	Dialog sub-components (Trigger, Content, Close)

Dialog.Content

Prop	Type	Default	Description
`title`	string	—	Optional heading displayed at the top of the dialog
`className`	string	—	Additional CSS classes to apply to the dialog panel
`children`	ReactNode	—	Content rendered inside the dialog body

1	import { Dialog } from "@/components/ui/dialog"
2	import { Button } from "@/components/ui/button"
3
4	export default function Page() {
5	return (
6	<Dialog>
7	<Dialog.Trigger>Open Dialog</Dialog.Trigger>
8	<Dialog.Content title="Confirm Action">
9	<Dialog.Close />
10	<p>Are you sure you want to continue?</p>
11	<Button>Confirm</Button>
12	</Dialog.Content>
13	</Dialog>
14	)
15	}