iconiq.

Dialog

Accessible modal on Radix Dialog with Framer Motion overlay and content transitions, plus a staggered inner layout.

Live preview

Lock attention on one decision · Spring in and out of view · Dismiss without losing place

Install

v0

Ship the registry bundle to v0 and tweak motion or layout with prompts.

Usage

Controlled example — mirror open on DialogContent for exit animations. See tile 05 for registry peers.

tsx
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";

export function ConfirmDialog() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" variant="outline">
          Open dialog
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md" open={open}>
        <DialogHeader>
          <DialogTitle>Save changes?</DialogTitle>
          <DialogDescription>
            Your updates will be synced to the workspace.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button
            onClick={() => setOpen(false)}
            size="sm"
            type="button"
            variant="outline"
          >
            Cancel
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Dependencies

API surface and packages — same pattern as other Iconiq registry components.

Dialog

Radix Dialog.Root. Use controlled open / onOpenChange or leave uncontrolled. Pairs with DialogTrigger and DialogContent.

DialogContent + open

This build wraps the portal in AnimatePresence. Pass the same boolean you use on Dialog into DialogContent’s open prop so enter and exit transitions run when the modal closes.

DialogHeader, Title, Description, Footer

Layout helpers and Radix Title/Description for accessibility. Children inside content are wrapped with staggered motion variants.

@radix-ui/react-dialog

Focus trap, aria-modal, escape and pointer-outside behavior. Installed when you add the registry item.

framer-motion

Overlay fade, content spring (scale, blur, y), exit transition, and per-child stagger inside the panel.

lucide-react

Close affordance uses the X icon with a small hover rotation.

shadcn registry

Peer dependencies are declared on the registry item so shadcn@latest add pulls Radix Dialog, Framer Motion, and Lucide when needed.

npx shadcn@latest add https://iconiqui.com/r/dialog.json