A context menu that opens as a ring of wedges around the pointer on right-click, long-press or Shift F10. Aim toward a wedge to select it, read the label in the hub, and confirm with a click or Enter.
npx shadcn@latest add https://hyperblur.dev/r/popover-radial-menu.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popover-radial-menu.tsx.
import { PopoverRadialMenu } from "@/components/hyperblur/popover-radial-menu"
<PopoverRadialMenu onSelect={(id) => run(id)}><Canvas /></PopoverRadialMenu>| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: ReactNode; shortcut?: string; danger?: boolean }[] | Copy, Duplicate, Share, Favorite, Rename, Delete | Wedges clockwise from the top. Built-in glyphs exist for those six ids; pass icon for others. |
| children | ReactNode | A photo canvas | The area that listens for the context menu. |
| radius | number | 92 | Outer radius of the ring in px. |
| longPress | number | 450 | Touch hold in milliseconds that opens the menu. |
| onSelect | (id: string) => void | Called with the chosen item id. | |
| onOpenChange | (open: boolean) => void | Called when the ring opens or closes. | |
| label | string | "Photo actions" | Accessible name of the area and the menu. |
| embedded | boolean | false | Start with the ring open in the center and ignore outside clicks, for previews. |
| accent | string | "#2f7bff" | Active wedge and pointer color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |