A modal dialog component for displaying content in an overlay.
import { Button } from "@/components/ui/button/button";
import {
Dialog,
DialogClose,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPopup,
DialogPortal,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog/dialog";
import { Input } from "@/components/ui/input/input";
import styles from "./dialog-demo.module.css";
export default function DialogDemo() {
return (
<Dialog>
<DialogTrigger render={<Button>Open Dialog</Button>} />
<DialogPortal>
<DialogOverlay />
<DialogPopup className={styles.popup}>
<DialogHeader>
<DialogTitle>Edit Profile</DialogTitle>
<DialogDescription className={styles.description}>
Make changes to your profile here.
</DialogDescription>
</DialogHeader>
<div className={styles.form}>
<div className={styles.fieldGroup}>
<label className={styles.label} htmlFor="name">
Name
</label>
<Input defaultValue="John Doe" id="name" />
</div>
<div className={styles.fieldGroup}>
<label className={styles.label} htmlFor="email">
Email
</label>
<Input defaultValue="john@example.com" id="email" type="email" />
</div>
</div>
<DialogFooter className={styles.footer}>
<DialogClose render={<Button variant="outline">Cancel</Button>} />
<Button>Save Changes</Button>
</DialogFooter>
</DialogPopup>
</DialogPortal>
</Dialog>
);
}
npx shadcn@latest add https://roiui.com/r/dialog.json"use client";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { Button } from "@/components/ui/button/button";
import {
Dialog,
DialogClose,
DialogDescription,
DialogOverlay,
DialogPopup,
DialogPortal,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog/dialog";
import styles from "./dialog-motion.module.css";
export default function DialogFramerMotion() {
const [open, setOpen] = useState(false);
return (
<Dialog onOpenChange={setOpen} open={open}>
{!open && (
<DialogTrigger
render={
<Button
render={
<motion.button
className={styles.trigger}
id={styles.id}
key="button-inner"
layoutId="button"
/>
}
style={{ transition: "none" }}
>
Toggle Dialog
</Button>
}
/>
)}
<AnimatePresence>
<AnimatePresence>
{open && <DialogOverlay key="overlay" />}
</AnimatePresence>
<DialogPortal keepMounted key="portal">
{open && (
<DialogPopup
className={styles.popup}
render={
<motion.div
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
initial={{ opacity: 0.9999 }}
transition={{ type: "spring", duration: 0.4 }}
/>
}
>
<DialogTitle className={styles.title}>Premium Plan</DialogTitle>
<DialogDescription className={styles.description}>
Unlimited projects, priority support, and team collaboration
tools for growing businesses.
</DialogDescription>
<div className={styles.actions}>
<DialogClose
render={<Button variant="outline">Close</Button>}
/>
<AnimatePresence>
<Button
render={
<motion.button
className={styles.trigger}
id={styles.id}
key="button-inner"
layoutId="button"
/>
}
style={{ transition: "none" }}
>
Toggle Dialog
</Button>
</AnimatePresence>
</div>
</DialogPopup>
)}
</DialogPortal>
</AnimatePresence>
</Dialog>
);
}
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<DialogTitle />
<DialogDescription />
</DialogHeader>
<DialogFooter>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>