Dialog

1import {
2  Dialog,
3  DialogTrigger,
4  DialogContent,
5  DialogHeader,
6  DialogTitle,
7  DialogDescription,
8  DialogFooter,
9  DialogClose,
10} from "@/components/ui/dialog";
11
12<Dialog>
13  <DialogTrigger asChild>
14    <Button>Open Dialog</Button>
15  </DialogTrigger>
16  <DialogContent>
17    <DialogHeader>
18      <DialogTitle>Title</DialogTitle>
19      <DialogDescription>Dialog description goes here.</DialogDescription>
20    </DialogHeader>
21    <div className="py-4">Content goes here.</div>
22    <DialogFooter>
23      <DialogClose asChild>
24        <Button variant="outline">Close</Button>
25      </DialogClose>
26      <Button>Save</Button>
27    </DialogFooter>
28  </DialogContent>
29</Dialog>