Dialog
View on shadcn/uiA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Installation
pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/dialog.jsonUsage
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";<Dialog>
<DialogTrigger>Open dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog title</DialogTitle>
<DialogDescription>
This is a description of the dialog content.
</DialogDescription>
</DialogHeader>
<div>Your content goes here</div>
<DialogFooter>
<Button>Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>API reference
This component is built on top of Radix UI Dialog. For additional props and API documentation, refer to the Radix documentation.
Changelog
- 6 July 2026: added explicit "border-border" class