Dialog
A premium modal dialog with high-fidelity animations and depth styling.
Preview
Interactive Preview
Installation
Usage
tsx
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
export default function Demo() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Profile</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit Profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
{/* Form content */}
</DialogContent>
</Dialog>
)
}Dependencies
@radix-ui/react-dialogclsxtailwind-merge
Props
| Prop | Type | Default |
|---|---|---|
| variant | "default""expand""slide-up""drawer-right""drawer-bottom" | default |