Dialog
A modal window layered over the page for a focused task, dismissible via overlay, Escape, or its own close button.
Install
pnpm dlx shadcn@latest add @namche/dialogUsage
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
<Dialog>
<DialogTrigger render={<Button>New deployment</Button>} />
<DialogContent>
<DialogHeader>
<DialogTitle>Deploy Sirdar to production</DialogTitle>
<DialogDescription>Ships main to every region.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button variant="ghost">Cancel</Button>} />
<DialogClose render={<Button>Deploy</Button>} />
</DialogFooter>
</DialogContent>
</Dialog>DialogContent renders its own close button (top right) by default; pass
showCloseButton={false} to hide it. DialogFooter also takes a
showCloseButton prop that appends a Close rendered as an outline button,
as an alternative to composing DialogClose yourself.