Getting Started
Core Components
Text Effects
Number Effects
Interactive Elements
Toolbars
Advanced Effects
Introduction Installation Accordion Animated Background Animated Group Border Trail Carousel Cursor Dialog Disclosure In View Infinite Slider Transition Panel Text Effect Text Loop Text Morph Text Roll Text Scramble Text Shimmer Text Shimmer Wave Animated Number Sliding Number Dock Glow Effect Image Comparison Scroll Progress Spotlight Spinning Text Tilt Toolbar Dynamic Toolbar Expandable Magnetic Morphing Dialog Morphing Popover Progressive Blur
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Customize the dialog with variants and transition.
Examples
Basic Dialog
Controlled Dialog
You can control the open state of the dialog using the open and onOpenChange props.
Dialog with custom variants and transition
Dialog with custom exit animation
You can customize the exit animation by providing a custom exit variant.
Dialog with custom backdrop
You can customize the backdrop using the backdrop: prefix on DialogContent, e.g., backdrop:bg-white/20.
Installation
CLI Manual
npx shadcn add "https://motion-primitives.com/c/dialog.json" "https://motion-primitives.com/h/usePreventScroll.json"
Component API
Dialog
Prop Type Default Description children ReactNode required Children to be rendered within the dialog. variants Variants Variants for controlling the animation states with specific properties for initial, animate, and exit states. transition Transition Transition settings from framer-motion for animation effects. className string Optional CSS class for styling the dialog container. defaultOpen boolean false If true, the dialog will be open by default. onOpenChange (open: boolean) => voidCallback function that is called when the dialog's open state changes. open boolean Controlled open state of the dialog.
DialogTrigger
Prop Type Default Description children ReactNode required The content to be rendered inside the trigger button. className string Optional CSS class for styling the trigger button.
DialogContent
Prop Type Default Description children ReactNode required The content to be rendered inside the dialog. className string Optional CSS class for styling the dialog content. container HTMLElement document.body Specify a container element to portal the content into.
Prop Type Default Description children ReactNode required The content to be rendered inside the dialog header. className string Optional CSS class for styling the dialog header.
DialogTitle
Prop Type Default Description children ReactNode required The title content to be rendered inside the dialog. className string Optional CSS class for styling the dialog title.
DialogDescription
Prop Type Default Description children ReactNode required The description content to be rendered inside the dialog. className string Optional CSS class for styling the dialog description.
DialogClose
Prop Type Default Description className string Optional CSS class for styling the close button. children ReactNode Optional content to be rendered inside the close button. If not provided, a default close icon will be used. disabled boolean If true, the close button will be disabled.