{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mac-context-menu",
  "title": "Mac Context Menu",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A right-click menu styled like macOS: frosted panel, accent-color highlight, key equivalents, checkmarks, submenus and a red destructive item, on Radix for full keyboard support.",
  "dependencies": [
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/mac-context-menu.tsx",
      "content": "// Ballmac UI: Mac Context Menu. https://ui.ballmac.com/components/mac-context-menu\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\nimport { ContextMenu as Primitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst content =\n  \"z-50 min-w-[13.5rem] overflow-hidden rounded-[10px] border border-foreground/10 bg-popover/80 p-1.5 text-[13px] text-popover-foreground shadow-[0_12px_40px_-8px_rgb(0_0_0/0.35),0_2px_8px_rgb(0_0_0/0.12)] backdrop-blur-2xl backdrop-saturate-150 outline-none dark:bg-popover/70 [--mac-accent:oklch(0.53_0.2_258)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 motion-reduce:animate-none\"\n\nconst item =\n  \"relative flex h-[22px] cursor-default items-center gap-2 rounded-[5px] pe-2.5 ps-[22px] outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:text-foreground/35 data-[highlighted]:bg-(--mac-accent) data-[highlighted]:text-white [&_svg]:size-3.5 [&_svg]:shrink-0\"\n\nfunction MacContextMenu(props: React.ComponentProps<typeof Primitive.Root>) {\n  return <Primitive.Root {...props} />\n}\n\nfunction MacContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof Primitive.Trigger>) {\n  return <Primitive.Trigger data-slot=\"mac-context-menu-trigger\" className={className} {...props} />\n}\n\nfunction MacContextMenuContent({ className, ...props }: React.ComponentProps<typeof Primitive.Content>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.Content data-slot=\"mac-context-menu-content\" collisionPadding={8} className={cn(content, className)} {...props} />\n    </Primitive.Portal>\n  )\n}\n\ntype MacContextMenuItemProps = React.ComponentProps<typeof Primitive.Item> & {\n  /** Leading icon, drawn in the left gutter. */\n  icon?: React.ReactNode\n  /** Key equivalent shown at the right, such as ⌘C. */\n  shortcut?: string\n  /** Destructive items turn red until highlighted. */\n  destructive?: boolean\n}\n\nfunction MacContextMenuItem({ icon, shortcut, destructive, className, children, ...props }: MacContextMenuItemProps) {\n  return (\n    <Primitive.Item data-slot=\"mac-context-menu-item\" data-destructive={destructive ? \"\" : undefined} className={cn(item, icon && \"ps-[30px]\", destructive && \"text-destructive data-[highlighted]:text-white\", className)} {...props}>\n      {icon && <span aria-hidden=\"true\" className=\"absolute start-2 flex items-center\">{icon}</span>}\n      <span className=\"flex-1 truncate\">{children}</span>\n      {shortcut && <MacContextMenuShortcut>{shortcut}</MacContextMenuShortcut>}\n    </Primitive.Item>\n  )\n}\n\nfunction MacContextMenuCheckboxItem({ className, children, shortcut, ...props }: React.ComponentProps<typeof Primitive.CheckboxItem> & { shortcut?: string }) {\n  return (\n    <Primitive.CheckboxItem data-slot=\"mac-context-menu-checkbox-item\" className={cn(item, className)} {...props}>\n      <Primitive.ItemIndicator className=\"absolute start-1.5 flex items-center\">\n        <Check aria-hidden=\"true\" strokeWidth={3} />\n      </Primitive.ItemIndicator>\n      <span className=\"flex-1 truncate\">{children}</span>\n      {shortcut && <MacContextMenuShortcut>{shortcut}</MacContextMenuShortcut>}\n    </Primitive.CheckboxItem>\n  )\n}\n\nfunction MacContextMenuRadioGroup(props: React.ComponentProps<typeof Primitive.RadioGroup>) {\n  return <Primitive.RadioGroup {...props} />\n}\n\nfunction MacContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof Primitive.RadioItem>) {\n  return (\n    <Primitive.RadioItem data-slot=\"mac-context-menu-radio-item\" className={cn(item, className)} {...props}>\n      <Primitive.ItemIndicator className=\"absolute start-1.5 flex items-center\">\n        <Check aria-hidden=\"true\" strokeWidth={3} />\n      </Primitive.ItemIndicator>\n      <span className=\"flex-1 truncate\">{children}</span>\n    </Primitive.RadioItem>\n  )\n}\n\nfunction MacContextMenuLabel({ className, ...props }: React.ComponentProps<typeof Primitive.Label>) {\n  return <Primitive.Label data-slot=\"mac-context-menu-label\" className={cn(\"px-[22px] pt-1 pb-0.5 text-[11px] font-semibold text-muted-foreground\", className)} {...props} />\n}\n\nfunction MacContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof Primitive.Separator>) {\n  return <Primitive.Separator data-slot=\"mac-context-menu-separator\" className={cn(\"mx-2.5 my-1 h-px bg-foreground/12\", className)} {...props} />\n}\n\nfunction MacContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"mac-context-menu-shortcut\" aria-hidden=\"true\" className={cn(\"ms-6 text-[12px] tracking-wide text-muted-foreground group-data-[highlighted]:text-white/80 [[data-highlighted]_&]:text-white/80\", className)} {...props} />\n}\n\nfunction MacContextMenuSub(props: React.ComponentProps<typeof Primitive.Sub>) {\n  return <Primitive.Sub {...props} />\n}\n\nfunction MacContextMenuSubTrigger({ className, children, icon, ...props }: React.ComponentProps<typeof Primitive.SubTrigger> & { icon?: React.ReactNode }) {\n  return (\n    <Primitive.SubTrigger data-slot=\"mac-context-menu-sub-trigger\" className={cn(item, icon && \"ps-[30px]\", \"data-[state=open]:bg-foreground/10\", className)} {...props}>\n      {icon && <span aria-hidden=\"true\" className=\"absolute start-2 flex items-center\">{icon}</span>}\n      <span className=\"flex-1 truncate\">{children}</span>\n      <ChevronRight aria-hidden=\"true\" className=\"ms-4 -me-1 rtl:rotate-180\" strokeWidth={2.5} />\n    </Primitive.SubTrigger>\n  )\n}\n\nfunction MacContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof Primitive.SubContent>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.SubContent data-slot=\"mac-context-menu-sub-content\" collisionPadding={8} className={cn(content, \"shadow-lg\", className)} {...props} />\n    </Primitive.Portal>\n  )\n}\n\nexport {\n  MacContextMenu,\n  MacContextMenuTrigger,\n  MacContextMenuContent,\n  MacContextMenuItem,\n  MacContextMenuCheckboxItem,\n  MacContextMenuRadioGroup,\n  MacContextMenuRadioItem,\n  MacContextMenuLabel,\n  MacContextMenuSeparator,\n  MacContextMenuShortcut,\n  MacContextMenuSub,\n  MacContextMenuSubTrigger,\n  MacContextMenuSubContent,\n  type MacContextMenuItemProps,\n}\n",
      "type": "registry:ui",
      "target": "@components/ballmac/mac-context-menu.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "context menu",
      "macos",
      "right click",
      "menu",
      "shortcuts"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "Compose <MacContextMenu><MacContextMenuTrigger/><MacContextMenuContent> with MacContextMenuItem (icon, shortcut, destructive), CheckboxItem, RadioGroup/RadioItem, Label, Separator and Sub parts. Shift+F10 and long-press also open it.",
      "whenToUse": [
        "Desktop-like apps and file managers",
        "Anywhere you want the macOS look"
      ],
      "whenNotToUse": [
        "Standard product UI (context-menu)",
        "Click-opened menus (dropdown-menu)"
      ],
      "composesWith": [
        "finder-window",
        "desktop-icons",
        "context-menu"
      ],
      "a11y": [
        {
          "keys": "Shift+F10 / ContextMenu key",
          "action": "Opens the menu on the focused trigger"
        },
        {
          "keys": "ArrowUp / ArrowDown",
          "action": "Moves through items; ArrowRight opens a submenu"
        },
        {
          "keys": "Escape",
          "action": "Closes"
        }
      ],
      "customization": [
        "shortcut and icon per item",
        "destructive",
        "accent via --mac-accent"
      ]
    },
    "examples": [
      "mac-context-menu-demo",
      "mac-context-menu-view"
    ],
    "url": "https://ui.ballmac.com/components/mac-context-menu"
  },
  "categories": [
    "macos"
  ],
  "type": "registry:ui"
}