Dialog

A window overlaid on the primary content, requiring user interaction.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogTrigger,
} from "passport-ui";
import { Button } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent className="w-sm">
<div className="meta-container">
<h3>Account Settings</h3>
<p>Manage your account settings and preferences here.</p>
</div>
<Separator />
<div className="meta-container">
<h3>Profile Information</h3>
<p>Update your personal details and contact information</p>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="ghost">Cancel</Button>
</DialogClose>
<Button>Save Changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>

Additional resources

Documentation and examples are available in Storybook.