4f: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"] 50: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"] 51: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"] 52:T23fe,'use client'; import { Plus, X } from 'lucide-react'; import { AnimatePresence, MotionConfig, type Transition, motion } from 'motion/react'; import type React from 'react'; import { useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; // Card item type interface CardItem { id: number; url: string; title: string; description: string; tags: string[]; } // Animation config const transition: Transition = { type: 'spring', bounce: 0.05, duration: 0.3, }; const LinearCardDialog: React.FC = () => { const [index, setIndex] = useState(0); const [isOpen, setIsOpen] = useState(false); const [carouselWidth, setCarouselWidth] = useState(0); const carousel = useRef(null); // Default items (standalone, fixed) const items: CardItem[] = [ { id: 1, url: 'https://images.unsplash.com/photo-1757672242146-a6a7897bcc80?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', title: 'Accordion', description: 'Immerse yourself in our cutting-edge interactive gallery...', tags: ['Sunrise', 'Mountains', 'Golden', 'Scenic', 'Inspiring'], }, { id: 2, url: 'https://images.unsplash.com/photo-1756806983725-977bb2308d4e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', title: 'Globe Section', description: 'Embark on a virtual journey around the world with our state-of-the-art 3D globe feature...', tags: ['Misty', 'Path', 'Mysterious', 'Serene', 'Rugged'], }, { id: 3, url: 'https://images.unsplash.com/photo-1756806983832-1f056cf24182?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', title: 'Image Mouse Trail', description: 'Transform your browsing experience with our mesmerizing Image Mouse Trail feature...', tags: ['Pathway', 'Adventure', 'Peaks', 'Challenging', 'Breathtaking'], }, ]; useEffect(() => { if (isOpen) { document.body.classList.add('overflow-hidden'); } else { document.body.classList.remove('overflow-hidden'); } const handleKeyDown = (event: KeyboardEvent): void => { if (event.key === 'Escape' && isOpen) { handleCloseDialog(); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); document.body.classList.remove('overflow-hidden'); }; }, [isOpen]); useEffect(() => { if (carousel.current) { const scrollWidth = carousel.current.scrollWidth; const offsetWidth = carousel.current.offsetWidth; setCarouselWidth(scrollWidth - offsetWidth); } }, [items]); const handleCardClick = (itemIndex: number): void => { setIndex(itemIndex); setIsOpen(true); }; const handleCloseDialog = (): void => { setIsOpen(false); }; const handleBackdropClick = (e: React.MouseEvent): void => { if (e.target === e.currentTarget) { handleCloseDialog(); } }; const currentItem = items[index]; return (

{items.map((item, i) => ( handleCardClick(i)} onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleCardClick(i); } }} role='button' aria-label={`Open ${item.title} details`} >

{item.title}

))} {isOpen && currentItem && createPortal( , document.body )}

); }; export default LinearCardDialog; 53:T2a07,'use client'; import { cn } from '@/lib/utils'; import { XIcon } from 'lucide-react'; import { AnimatePresence, MotionConfig, type Transition, type Variant, motion } from 'motion/react'; import React, { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; interface DialogContextType { isOpen: boolean; setIsOpen: React.Dispatch>; uniqueId: string; triggerRef: React.RefObject; } const DialogContext = React.createContext(null); function useDialog() { const context = useContext(DialogContext); if (!context) { throw new Error('useDialog must be used within a DialogProvider'); } return context; } type DialogProviderProps = { children: React.ReactNode; transition?: Transition; }; function DialogProvider({ children, transition }: DialogProviderProps) { const [isOpen, setIsOpen] = useState(false); const uniqueId = useId(); const triggerRef = useRef(null); const contextValue = useMemo( () => ({ isOpen, setIsOpen, uniqueId, triggerRef }), [isOpen, uniqueId] ); return ( {children} ); } type DialogProps = { children: React.ReactNode; transition?: Transition; }; function Dialog({ children, transition }: DialogProps) { return ( {children} ); } type DialogTriggerProps = { children: React.ReactNode; className?: string; style?: React.CSSProperties; triggerRef?: React.RefObject; }; function DialogTrigger({ children, className, style, triggerRef }: DialogTriggerProps) { const { setIsOpen, isOpen, uniqueId } = useDialog(); const handleClick = useCallback(() => { setIsOpen(!isOpen); }, [isOpen, setIsOpen]); const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setIsOpen(!isOpen); } }, [isOpen, setIsOpen] ); return ( {children} ); } type DialogContent = { children: React.ReactNode; className?: string; style?: React.CSSProperties; }; function DialogContent({ children, className, style }: DialogContent) { const { setIsOpen, isOpen, uniqueId, triggerRef } = useDialog(); const containerRef = useRef(null); const [firstFocusableElement, setFirstFocusableElement] = useState(null); const [lastFocusableElement, setLastFocusableElement] = useState(null); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { setIsOpen(false); } if (event.key === 'Tab') { if (!firstFocusableElement || !lastFocusableElement) return; if (event.shiftKey) { if (document.activeElement === firstFocusableElement) { event.preventDefault(); lastFocusableElement.focus(); } } else { if (document.activeElement === lastFocusableElement) { event.preventDefault(); firstFocusableElement.focus(); } } } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, [setIsOpen, firstFocusableElement, lastFocusableElement]); useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden'; const focusableElements = containerRef.current?.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); if (focusableElements && focusableElements.length > 0) { setFirstFocusableElement(focusableElements[0] as HTMLElement); setLastFocusableElement(focusableElements[focusableElements.length - 1] as HTMLElement); // Delay focus slightly to allow animation to start requestAnimationFrame(() => { (focusableElements[0] as HTMLElement).focus(); }); } if (containerRef.current) { containerRef.current.scrollTop = 0; } } else { document.body.style.overflow = ''; triggerRef.current?.focus(); } }, [isOpen, triggerRef]); return ( <> ); } type DialogContainerProps = { children: React.ReactNode; className?: string; overlayClassName?: string; style?: React.CSSProperties; }; function DialogContainer({ children, className, overlayClassName }: DialogContainerProps) { const { isOpen, setIsOpen, uniqueId } = useDialog(); const [mounted, setMounted] = useState(false); useEffect(() => { const drawerWrapper = document.querySelectorAll('[drawer-wrapper]'); if (isOpen) { document.body.classList.add('overflow-hidden'); drawerWrapper.forEach((wrapper) => wrapper?.classList.add('open')); } else { document.body.classList.remove('overflow-hidden'); drawerWrapper.forEach((wrapper) => wrapper?.classList.remove('open')); } const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { setIsOpen(false); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, [isOpen]); useEffect(() => { setMounted(true); return () => { setMounted(false); }; }, []); if (!mounted) return null; return createPortal( {isOpen && ( <> setIsOpen(false)} > {children} )} , document.body ); } type DialogTitleProps = { children: React.ReactNode; className?: string; style?: React.CSSProperties; }; function DialogTitle({ children, className, style }: DialogTitleProps) { const { uniqueId } = useDialog(); return ( {children} ); } type DialogSubtitleProps = { children: React.ReactNode; className?: string; style?: React.CSSProperties; }; function DialogSubtitle({ children, className, style }: DialogSubtitleProps) { const { uniqueId } = useDialog(); return ( {children} ); } type DialogDescriptionProps = { children: React.ReactNode; className?: string; disableLayoutAnimation?: boolean; variants?: { initial: Variant; animate: Variant; exit: Variant; }; }; function DialogDescription({ children, className, variants, disableLayoutAnimation, }: DialogDescriptionProps) { const { uniqueId } = useDialog(); return ( {children} ); } type DialogImageProps = { src: string; alt: string; className?: string; style?: React.CSSProperties; }; function DialogImage({ src, alt, className, style }: DialogImageProps) { const { uniqueId } = useDialog(); return ( ); } type DialogCloseProps = { children?: React.ReactNode; className?: string; variants?: { initial: Variant; animate: Variant; exit: Variant; }; }; function DialogClose({ children, className, variants }: DialogCloseProps) { const { setIsOpen, uniqueId } = useDialog(); const handleClose = useCallback(() => { setIsOpen(false); }, [setIsOpen]); return ( {children || } ); } export { Dialog, DialogClose, DialogContainer, DialogContent, DialogDescription, DialogImage, DialogSubtitle, DialogTitle, DialogTrigger, }; 4b:["$","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","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui-layouts.com/r/linear-modal-standalone.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/linear-modal-standalone","itemId":"@ui-layouts/linear-modal-standalone"}],["$","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"}],["$","$L51",null,{"files":[{"path":"./registry/components/linear-modal/standalone-version.tsx","content":"$52","type":"registry:component"},{"path":"./components/ui/linear-modal.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Linear Modal Standalone

Installation

Files

components

Styles