50: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"] 51: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"] 52: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"] 53:T2019,"use client"; import { AnimatePresence, MotionConfig, type Transition, useReducedMotion, } from "motion/react"; import * as m from "motion/react-m"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/sona-utils"; export interface DockMenuItem { /** Display label shown on the item pill. */ label: string; /** Icon component (e.g. from lucide-react). */ icon: React.ComponentType<{ className?: string; strokeWidth?: number; "aria-hidden"?: boolean | "true" | "false"; }>; /** Called when the item is selected. */ onSelect?: () => void; } export interface CircularDockMenuProps { /** * Items rendered as arc pills when the menu is open. */ items?: DockMenuItem[]; /** Controlled open state. */ open?: boolean; /** Initial open state for uncontrolled usage. @default false */ defaultOpen?: boolean; /** Called when the menu opens or closes. */ onOpenChange?: (open: boolean) => void; /** * Spring stiffness for the open/close animation. * @default 420 */ stiffness?: number; /** * Spring damping for the open/close animation. * @default 32 */ damping?: number; /** Additional CSS classes for the root container. */ className?: string; } const DEFAULT_ITEMS: DockMenuItem[] = []; function getArcPosition(index: number, total: number) { const progress = total <= 1 ? 0 : index / (total - 1); const radius = 500 - progress * 270; const angle = (-140 + progress * 36) * (Math.PI / 180); return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, rotate: -12 + progress * 9, }; } export default function CircularDockMenu({ items = DEFAULT_ITEMS, open: controlledOpen, defaultOpen = false, onOpenChange, stiffness = 420, damping = 32, className, }: CircularDockMenuProps) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const isControlled = controlledOpen !== undefined; const isOpen = isControlled ? controlledOpen : internalOpen; const rootRef = useRef(null); const triggerRef = useRef(null); const shouldReduceMotion = useReducedMotion(); const springConfig: Transition = useMemo( () => ({ type: "spring", stiffness, damping, mass: 0.8 }), [stiffness, damping], ); const resolvedTransition: Transition = shouldReduceMotion ? { duration: 0 } : springConfig; const setOpen = useCallback( (nextOpen: boolean) => { if (!isControlled) setInternalOpen(nextOpen); onOpenChange?.(nextOpen); }, [isControlled, onOpenChange], ); const positionedItems = useMemo( () => items.map((item, index) => ({ ...item, ...getArcPosition(index, items.length), })), [items], ); useEffect(() => { if (!isOpen) return; const handlePointerDown = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); }; document.addEventListener("pointerdown", handlePointerDown); return () => document.removeEventListener("pointerdown", handlePointerDown); }, [isOpen, setOpen]); return (

{isOpen && positionedItems.map( ({ label, icon: Icon, onSelect, x, y, rotate }, index) => ( { onSelect?.(); setOpen(false); }} onKeyDown={(event) => { if (event.key === "Escape") { event.preventDefault(); setOpen(false); triggerRef.current?.focus(); } }} whileHover={ shouldReduceMotion ? {} : { scale: 1.05, zIndex: 20 } } whileTap={shouldReduceMotion ? {} : { scale: 0.96 }} > ), )} setOpen(!isOpen)} className={cn( "absolute bottom-12 left-1/2 z-20 flex size-24 -translate-x-1/2 items-center justify-center rounded-full border", "border-border bg-background text-foreground shadow-lg", "hover:border-border/80 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", )} whileHover={shouldReduceMotion ? {} : { scale: 1.04 }} whileTap={shouldReduceMotion ? {} : { scale: 0.94 }} >

); } 4c:["$","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"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@sona-ui/sona-utils"]}]]}],["$","$L51",null,{"sourceUrl":"https://sona-ui.vercel.app/r/circular-dock-menu.json","proxyUrl":"https://shadcnregistry.com/r/sona-ui/circular-dock-menu","itemId":"@sona-ui/circular-dock-menu"}],["$","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"}],["$","$L52",null,{"files":[{"path":"registry/sonaui/circular-dock-menu/circular-dock-menu.tsx","content":"$53","type":"registry:ui","target":"components/ui/circular-dock-menu/circular-dock-menu.tsx"}]}]]}],"$L54"]}]

Circular Dock Menu

Installation

Files

components

Styles