Dialog Component

A modal dialog component that renders content in a layer above the page.

• Built on top of Radix UI's Dialog primitive
• Fully accessible with proper focus management
• Keyboard navigation and screen reader support
• Customizable with multiple parts for flexible layouts

---

Installation

The Dialog component is part of our UI library. You can import it directly from the components directory.

---

Usage

Here is how to use the dialog in your project.

React TSX
1import { 
2  Dialog, 
3  DialogTrigger, 
4  DialogContent, 
5  DialogHeader, 
6  DialogTitle, 
7  DialogDescription,
8  DialogFooter 
9} from "@/components/modern-ui/dialog"

React TSX
1<Dialog>
2  <DialogTrigger>Open dialog</DialogTrigger>
3  <DialogContent>
4    <DialogHeader>
5      <DialogTitle>Dialog Title</DialogTitle>
6      <DialogDescription>Dialog description goes here.</DialogDescription>
7    </DialogHeader>
8    <div>Main content of the dialog</div>
9    <DialogFooter>
10      <Button>Action</Button>
11    </DialogFooter>
12  </DialogContent>
13</Dialog>

---

Examples

Basic Dialog

React TSX
1<Dialog>
2  <DialogTrigger asChild>
3    <Button>Open Dialog</Button>
4  </DialogTrigger>
5  <DialogContent className="sm:max-w-[425px]">
6    <DialogHeader>
7      <DialogTitle>Basic Dialog</DialogTitle>
8      <DialogDescription>
9        This is a simple dialog with a title and description.
10      </DialogDescription>
11    </DialogHeader>
12    <div className="py-4">
13      This is the main content of the dialog.
14    </div>
15    <DialogFooter>
16      <Button>Close</Button>
17    </DialogFooter>
18  </DialogContent>
19</Dialog>

Form Dialog

React TSX
1<Dialog>
2  <DialogTrigger asChild>
3    <Button>Edit Profile</Button>
4  </DialogTrigger>
5  <DialogContent>
6    <DialogHeader>
7      <DialogTitle>Edit Profile</DialogTitle>
8      <DialogDescription>
9        Make changes to your profile here.
10      </DialogDescription>
11    </DialogHeader>
12    <div className="grid gap-4 py-4">
13      <div className="grid grid-cols-4 items-center gap-4">
14        <Label htmlFor="name" className="text-right">Name</Label>
15        <Input id="name" className="col-span-3" />
16      </div>
17      <div className="grid grid-cols-4 items-center gap-4">
18        <Label htmlFor="email" className="text-right">Email</Label>
19        <Input id="email" className="col-span-3" />
20      </div>
21    </div>
22    <DialogFooter>
23      <Button type="submit">Save changes</Button>
24    </DialogFooter>
25  </DialogContent>
26</Dialog>

API Reference

Dialog Component Parts

The Dialog component is composed of several parts:

Dialog Props

DialogContent Props

Keyboard Interactions

</rewritten_file>