Components
Loading preview...
A fluid dialog with spring animations, backdrop overlay, and composable header/footer/title components. Built on Radix UI with Framer Motion.
@micka_design
npx shadcn@latest add https://21st.dev/r/micka_design/dialog"use client";
import {
Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter,
DialogTitle, DialogDescription, DialogClose, Button
} from "../components/ui/dialog";
export default function DialogDemo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm action</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to continue?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="secondary">Cancel</Button>
</DialogClose>
<Button>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}