Dialog

import { Button } from "@/components/ui/button"
import {
  Dialog,

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/dialog.json

Usage

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Basic Dialog

import { Button } from "@/components/ui/button"
import {
  Dialog,

API Reference

Component	Description
`Dialog`	The root component
`DialogTrigger`	The button that opens the dialog
`DialogContent`	The dialog content container
`DialogHeader`	Header section
`DialogTitle`	The dialog title
`DialogDescription`	Description text
`DialogFooter`	Footer section for actions
`DialogClose`	Close button component

Dialog Props

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state
`defaultOpen`	`boolean`	-	The default open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open changes
`modal`	`boolean`	`true`	Whether the dialog is modal

DialogContent Props

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Show/hide the close button
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Called when escape key is pressed
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	Called when clicking outside

Dialog

Installation

Usage

Examples

Basic Dialog

API Reference

Dialog

Dialog Props

DialogContent Props

On this page