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:T251c,'use client'; import * as React from 'react'; import { LucideIcon } from 'lucide-react'; import { motion, AnimatePresence, type Transition } from 'motion/react'; import { ContextMenu } from '@base-ui-components/react/context-menu'; import { cn } from '@/lib/utils'; type RadialMenuProps = { children?: React.ReactNode; menuItems: MenuItem[]; size?: number; iconSize?: number; bandWidth?: number; innerGap?: number; outerGap?: number; outerRingWidth?: number; onSelect?: (item: MenuItem) => void; }; type MenuItem = { id: number; label: string; icon: LucideIcon; }; type Point = { x: number; y: number }; const menuTransition: Transition = { type: 'spring', stiffness: 420, damping: 32, mass: 1, }; const wedgeTransition: Transition = { duration: 0.05, ease: 'easeOut', }; const FULL_CIRCLE = 360; const START_ANGLE = -90; function degToRad(deg: number) { return (deg * Math.PI) / 180; } function polarToCartesian(radius: number, angleDeg: number): Point { const rad = degToRad(angleDeg); return { x: Math.cos(rad) * radius, y: Math.sin(rad) * radius, }; } function slicePath( index: number, total: number, wedgeRadius: number, innerRadius: number, ) { if (total <= 0) return ''; // single item → full donut ring if (total === 1) { return ` M ${wedgeRadius} 0 A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${-wedgeRadius} 0 A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${wedgeRadius} 0 M ${innerRadius} 0 A ${innerRadius} ${innerRadius} 0 1 0 ${-innerRadius} 0 A ${innerRadius} ${innerRadius} 0 1 0 ${innerRadius} 0 `; } const anglePerSlice = FULL_CIRCLE / total; const midDeg = START_ANGLE + anglePerSlice * index; const halfSlice = anglePerSlice / 2; const startDeg = midDeg - halfSlice; const endDeg = midDeg + halfSlice; const outerStart = polarToCartesian(wedgeRadius, startDeg); const outerEnd = polarToCartesian(wedgeRadius, endDeg); const innerStart = polarToCartesian(innerRadius, startDeg); const innerEnd = polarToCartesian(innerRadius, endDeg); const largeArcFlag = anglePerSlice > 180 ? 1 : 0; return ` M ${outerStart.x} ${outerStart.y} A ${wedgeRadius} ${wedgeRadius} 0 ${largeArcFlag} 1 ${outerEnd.x} ${outerEnd.y} L ${innerEnd.x} ${innerEnd.y} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y} Z `; } function RadialMenu({ children, menuItems, size = 240, iconSize = 18, bandWidth = 50, innerGap = 8, outerGap = 8, outerRingWidth = 12, onSelect, }: RadialMenuProps) { const radius = size / 2; const outerRingOuterRadius = radius; const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth; const wedgeOuterRadius = outerRingInnerRadius - outerGap; const wedgeInnerRadius = wedgeOuterRadius - bandWidth; const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2; const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0); const slice = 360 / menuItems.length; const itemRefs = React.useRef<(HTMLElement | null)[]>([]); const [activeIndex, setActiveIndex] = React.useState(null); const [open, setOpen] = React.useState(false); const resetActive = () => setActiveIndex(null); const handleOpenChange = (isOpen: boolean) => { setOpen(isOpen); if (!isOpen) resetActive(); }; return ( { return (

{children ? ( children ) : (

Right-click here.

)}

); }} /> {open && ( -positioner.height / 2} className="outline-none" > } > )} ); } export { RadialMenu }; 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","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"}]]}]}],["$","li","@base-ui-components/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui-components%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":"@base-ui-components/react"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://animate-ui.com/r/components-community-radial-menu.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/components-community-radial-menu","itemId":"@animate-ui/components-community-radial-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"}],["$","$L53",null,{"files":[{"path":"registry/components/community/radial-menu/index.tsx","content":"$54","type":"registry:ui","target":"components/animate-ui/components/community/radial-menu.tsx"}]}]]}],"$L55"]}]

Radial Menu

Installation

Files

components

Styles