51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T15b9,'use client'; import * as React from 'react'; import { Dialog as DialogPrimitive, DialogBackdrop as DialogBackdropPrimitive, DialogPanel as DialogPanelPrimitive, DialogTitle as DialogTitlePrimitive, Description as DialogDescriptionPrimitive, type DialogProps as DialogPrimitiveProps, type DialogBackdropProps as DialogBackdropPrimitiveProps, type DialogPanelProps as DialogPanelPrimitiveProps, type DialogTitleProps as DialogTitlePrimitiveProps, CloseButton, CloseButtonProps, } from '@headlessui/react'; import { motion, AnimatePresence, type Transition, type HTMLMotionProps, } from 'motion/react'; type DialogProps = Omit< DialogPrimitiveProps, 'static' > & { className?: string; as?: TTag; }; function Dialog({ className, ...props }: DialogProps) { return ( {props?.open && ( )} ); } type DialogBackdropProps = Omit, 'transition'> & HTMLMotionProps<'div'> & { as?: TTag; }; function DialogBackdrop( props: DialogBackdropProps, ) { const { as = motion.div, transition = { duration: 0.2, ease: 'easeInOut' }, ...rest } = props; return ( ); } type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right'; type DialogPanelProps = Omit, 'transition'> & Omit, 'children'> & { from?: DialogFlipDirection; transition?: Transition; as?: TTag; }; function DialogPanel( props: DialogPanelProps, ) { const { children, as = motion.div, from = 'top', transition = { type: 'spring', stiffness: 150, damping: 25 }, ...rest } = props; const initialRotation = from === 'bottom' || from === 'left' ? '20deg' : '-20deg'; const isVertical = from === 'top' || from === 'bottom'; const rotateAxis = isVertical ? 'rotateX' : 'rotateY'; return ( {(bag) => ( <>{typeof children === 'function' ? children(bag) : children} )} ); } type DialogCloseProps = CloseButtonProps & { as?: TTag; }; function DialogClose( props: DialogCloseProps, ) { const { as = 'button', ...rest } = props; return ( ); } type DialogHeaderProps = React.ComponentProps & { as?: TTag; }; function DialogHeader({ as: Component = 'div', ...props }: DialogHeaderProps) { return ; } type DialogFooterProps = React.ComponentProps & { as?: TTag; }; function DialogFooter({ as: Component = 'div', ...props }: DialogFooterProps) { return ; } type DialogTitleProps = DialogTitlePrimitiveProps & { as?: TTag; className?: string; }; function DialogTitle( props: DialogTitleProps, ) { return ; } type DialogDescriptionProps = React.ComponentProps> & { as?: TTag; className?: string; }; function DialogDescription( props: DialogDescriptionProps, ) { return ( ); } export { Dialog, DialogBackdrop, DialogPanel, DialogClose, DialogTitle, DialogDescription, DialogHeader, DialogFooter, type DialogProps, type DialogBackdropProps, type DialogPanelProps, type DialogCloseProps, type DialogTitleProps, type DialogDescriptionProps, type DialogHeaderProps, type DialogFooterProps, type DialogFlipDirection, }; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","@headlessui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40headlessui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@headlessui/react"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://animate-ui.com/r/primitives-headless-dialog.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/primitives-headless-dialog","itemId":"@animate-ui/primitives-headless-dialog"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/primitives/headless/dialog/index.tsx","content":"$54","type":"registry:ui","target":"components/animate-ui/primitives/headless/dialog.tsx"}]}]]}],"$L55"]}]

Headless Dialog

Installation

Files

components

Styles