Dialog

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

Preview

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         <p>Are you sure you want to continue?</p>
10         <Button>Confirm</Button>
11       </Dialog.Content>
12     </Dialog>
13   )
14 }

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	—	Trigger and Content sub-components

Dialog.Content

Prop	Type	Default	Description
`title`	string	—	Optional heading displayed at the top of the dialog
`showClose`	boolean	true	Show the close button in the top-right corner
`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	<p>Are you sure you want to continue?</p>
10	<Button>Confirm</Button>
11	</Dialog.Content>
12	</Dialog>
13	)
14	}