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 DialogLargeDemo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<Dialog>
<DialogTrigger asChild>
<Button variant="secondary">Open Large Dialog</Button>
</DialogTrigger>
<DialogContent size="lg">
<DialogHeader>
<DialogTitle>Privacy Settings</DialogTitle>
<DialogDescription>
Manage how your data is used and shared across the platform.
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-3 text-[13px] text-muted-foreground">
<p>We use your data to improve your experience and provide personalized recommendations. You can opt out of data collection at any time.</p>
<p>Your information is never sold to third parties. We only share aggregate, anonymized data with our analytics partners.</p>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="ghost">Decline</Button>
</DialogClose>
<DialogClose asChild>
<Button>Accept all</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}