Dialog

Component 18

About

A fluid dialog with spring animations, backdrop overlay, and composable header/footer/title components. Built on Radix UI with Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dialog to your project and fits it to your theme.

Code

How Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}