Repository: TheOrcDev/8bitcn-ui
Pull request #190: Feat/context menu
Author: login: TheOrcDev
Created: 2025-05-16T10:08:41Z | Merged: 2025-05-16T10:10:43Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced an 8-bit style context menu component with pixel-art inspired design and retro font.
  - Added interactive documentation and usage examples for the new context menu.
  - Included installation instructions and code snippets for easy integration.
  - Updated navigation and component registry to include the new context menu.
- **Chores**
  - Added a new dependency for context menu functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/app/docs/components/context-menu/page.tsx b/app/docs/components/context-menu/page.tsx
new file mode 100644
index 00000000..18313984
--- /dev/null
+++ b/app/docs/components/context-menu/page.tsx
@@ -0,0 +1,91 @@
+import { Metadata } from "next"
+
+import { contextMenuMetaData } from "@/lib/metadata"
+import { Button } from "@/components/ui/8bit/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/8bit/context-menu"
+import { Separator } from "@/components/ui/separator"
+
+import CodeSnippet from "../code-snippet"
+import CopyCommandButton from "../copy-command-button"
+import InstallationCommands from "../installation-commands"
+import { OpenInV0Button } from "../open-in-v0-button"
+
+export const metadata: Metadata = {
+  title: "8-bit Context Menu",
+  description: "Displays an 8-bit context menu component.",
+  openGraph: {
+    images: contextMenuMetaData,
+  },
+}
+
+export default function ButtonPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+        <h1 className="text-3xl font-bold">Context Menu</h1>
+        <CopyCommandButton
+          copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-context-menu.json`}
+          command={"pnpm dlx shadcn@canary add 8bit-context-menu"}
+        />
+      </div>
+
+      <p className="text-muted-foreground">
+        Displays an 8-bit context menu component.
+      </p>
+
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            8-bit context menu component
+          </h2>
+
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-context-menu" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ContextMenu>
+            <ContextMenuTrigger>
+              <Button>Right click me</Button>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem>Profile</ContextMenuItem>
+              <ContextMenuItem>Billing</ContextMenuItem>
+              <ContextMenuItem>Team</ContextMenuItem>
+              <ContextMenuItem>Subscription</ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        </div>
+      </div>
+
+      <h3 className="text-lg font-bold">Installation</h3>
+
+      <Separator />
+
+      <InstallationCommands
+        packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-context-menu.json`}
+      />
+
+      <h3 className="text-lg font-bold mt-10">Usage</h3>
+
+      <Separator />
+
+      <CodeSnippet>{`import { ContextMenu } from "@/components/ui/8bit/context-menu"`}</CodeSnippet>
+
+      <CodeSnippet>{`<ContextMenu>
+  <ContextMenuTrigger>Right click</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Profile</ContextMenuItem>
+    <ContextMenuItem>Billing</ContextMenuItem>
+    <ContextMenuItem>Team</ContextMenuItem>
+    <ContextMenuItem>Subscription</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>`}</CodeSnippet>
+    </div>
+  )
+}
diff --git a/components/ui/8bit/context-menu.tsx b/components/ui/8bit/context-menu.tsx
new file mode 100644
index 00000000..47c39651
--- /dev/null
+++ b/components/ui/8bit/context-menu.tsx
@@ -0,0 +1,288 @@
+"use client"
+
+import * as React from "react"
+import { Press_Start_2P } from "next/font/google"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const pressStart = Press_Start_2P({
+  weight: ["400"],
+  subsets: ["latin"],
+})
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto size-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <div className="relative">
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+          pressStart.className,
+          className
+        )}
+        {...props}
+      />
+      <div
+        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
+        aria-hidden="true"
+      />
+    </div>
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <svg
+          width="50"
+          height="50"
+          viewBox="0 0 256 256"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+          strokeWidth="0.25"
+          aria-label="check"
+          className="size-9"
+        >
+          <rect
+            x="80"
+            y="128"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 80 128)"
+          ></rect>
+          <rect
+            x="96"
+            y="144"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 96 144)"
+          ></rect>
+          <rect
+            x="112"
+            y="160"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 112 160)"
+          ></rect>
+          <rect
+            x="128"
+            y="144"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 128 144)"
+          ></rect>
+          <rect
+            x="144"
+            y="128"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 144 128)"
+          ></rect>
+          <rect
+            x="160"
+            y="112"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 160 112)"
+          ></rect>
+          <rect
+            x="176"
+            y="96"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 176 96)"
+          ></rect>
+          <rect
+            x="192"
+            y="80"
+            width="14"
+            height="14"
+            rx="1"
+            transform="rotate(90 192 80)"
+          ></rect>
+        </svg>
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="size-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/config/nav-items.ts b/config/nav-items.ts
index 5364e7e7..589ac24c 100644
--- a/config/nav-items.ts
+++ b/config/nav-items.ts
@@ -75,6 +75,11 @@ export const navItems = {
           title: "Command",
           url: "/docs/components/command",
         },
+        {
+          title: "Context Menu",
+          url: "/docs/components/context-menu",
+          new: true,
+        },
         {
           title: "Collapsible",
           url: "/docs/components/collapsible",
diff --git a/lib/metadata.ts b/lib/metadata.ts
index 7e66c815..f5106a52 100644
--- a/lib/metadata.ts
+++ b/lib/metadata.ts
@@ -49,3 +49,4 @@ export const toggleGroupMetaData = "/assets/8bitcn-toggle-group-light.png"
 export const accordionMetaData = "/assets/8bitcn-accordion-light.png"
 export const sliderMetaData = "/assets/8bitcn-slider-light.png"
 export const datePickerMetaData = "/assets/8bitcn-date-picker-light.png"
+export const contextMenuMetaData = "/assets/8bitcn-context-menu-light.png"
diff --git a/package.json b/package.json
index 66534cb7..52fca727 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.14",
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-hover-card": "^1.1.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 995b606d..1e25d716 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@radix-ui/react-collapsible':
         specifier: ^1.1.10
         version: 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.2.14
+        version: 2.2.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-dialog':
         specifier: ^1.1.13
         version: 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -770,6 +773,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context-menu@2.2.14':
+    resolution: {integrity: sha512-RUHvrJE2qKAd9pQ50HZZsePio4SMWEh8v6FWQwg/4t6K1fuxfb4Ec40VEVvni6V7nFxmj9srU4UZc7aYp8x0LQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-context@1.1.2':
     resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
@@ -4392,6 +4408,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-context-menu@2.2.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-context@1.1.2(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       react: 19.1.0
diff --git a/public/assets/8bitcn-context-menu-light.png b/public/assets/8bitcn-context-menu-light.png
new file mode 100644
index 00000000..ab7c5b4a
Binary files /dev/null and b/public/assets/8bitcn-context-menu-light.png differ
diff --git a/public/r/8bit-context-menu.json b/public/r/8bit-context-menu.json
new file mode 100644
index 00000000..55cf3843
--- /dev/null
+++ b/public/r/8bit-context-menu.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "8bit-context-menu",
+  "type": "registry:component",
+  "title": "8-bit Context Menu",
+  "description": "A simple 8-bit context menu component",
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/8bit/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Press_Start_2P } from \"next/font/google\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst pressStart = Press_Start_2P({\n  weight: [\"400\"],\n  subsets: [\"latin\"],\n})\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto size-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <div className=\"relative\">\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        className={cn(\n          \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n          pressStart.className,\n          className\n        )}\n        {...props}\n      />\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <svg\n          width=\"50\"\n          height=\"50\"\n          viewBox=\"0 0 256 256\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          stroke=\"currentColor\"\n          strokeWidth=\"0.25\"\n          aria-label=\"check\"\n          className=\"size-9\"\n        >\n          <rect\n            x=\"80\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 80 128)\"\n          ></rect>\n          <rect\n            x=\"96\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 96 144)\"\n          ></rect>\n          <rect\n            x=\"112\"\n            y=\"160\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 112 160)\"\n          ></rect>\n          <rect\n            x=\"128\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 128 144)\"\n          ></rect>\n          <rect\n            x=\"144\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 144 128)\"\n          ></rect>\n          <rect\n            x=\"160\"\n            y=\"112\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 160 112)\"\n          ></rect>\n          <rect\n            x=\"176\"\n            y=\"96\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 176 96)\"\n          ></rect>\n          <rect\n            x=\"192\"\n            y=\"80\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 192 80)\"\n          ></rect>\n        </svg>\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"size-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:component",
+      "target": "components/ui/8bit/context-menu.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index 16a723ed..14f43b35 100644
--- a/registry.json
+++ b/registry.json
@@ -409,6 +409,20 @@
         }
       ]
     },
+    {
+      "name": "8bit-context-menu",
+      "type": "registry:component",
+      "title": "8-bit Context Menu",
+      "description": "A simple 8-bit context menu component",
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/8bit/context-menu.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/context-menu.tsx"
+        }
+      ]
+    },
     {
       "name": "8bit-toggle",
       "type": "registry:component",


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (5)</summary><blockquote>

<details>
<summary>app/docs/components/context-menu/page.tsx (1)</summary><blockquote>

`78-88`: **Usage snippet should import all subcomponents**  
The snippet only imports `{ ContextMenu }` but the example above uses `ContextMenuTrigger`, `ContextMenuContent`, and `ContextMenuItem`. Consider updating the snippet to:

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
} from "@/components/ui/8bit/context-menu"
```

</blockquote></details>
<details>
<summary>components/ui/8bit/context-menu.tsx (4)</summary><blockquote>

`48-61`: **Consider applying 8-bit styling to SubContent component**

The ContextMenuSubContent lacks the distinctive 8-bit styling (thick borders, pixelated edges) that you've applied to the main ContextMenuContent. This creates an inconsistent visual experience when submenus are opened.

```diff
 <ContextMenuPrimitive.SubContent
   ref={ref}
   className={cn(
-    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+    "z-50 min-w-[8rem] overflow-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+    pressStart.className,
     className
   )}
   {...props}
 />
```

---

`120-195`: **Creative pixelated checkmark implementation**

The SVG-based pixelated checkmark is a perfect match for the 8-bit theme. However, there is an opportunity to optimize this implementation:


Consider extracting this SVG to a separate component or constant to improve code readability and maintainability. This would also make it easier to reuse the icon elsewhere if needed.

```tsx
// Example of how you could extract this to a constant
const PixelCheckmarkIcon = (
  <svg
    width="50"
    height="50"
    viewBox="0 0 256 256"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
    strokeWidth="0.25"
    aria-label="check"
    className="size-9"
  >
    {/* Rect elements here */}
  </svg>
);

// Then use it in the component:
// <ContextMenuPrimitive.ItemIndicator>
//   {PixelCheckmarkIcon}
// </ContextMenuPrimitive.ItemIndicator>
```

---

`204-224`: **Consider a more 8-bit style for radio indicators**

While the Circle icon works, it doesn't match the pixel-art aesthetic of the checkmark you created for checkbox items. Consider creating a similarly pixelated radio indicator.

```diff
<ContextMenuPrimitive.ItemIndicator>
-  <Circle className="size-2 fill-current" />
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 256 256"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="radio selected"
+    className="size-9"
+  >
+    <rect x="112" y="112" width="32" height="32" rx="1" />
+  </svg>
</ContextMenuPrimitive.ItemIndicator>
```

---

`218-218`: **Add aria-label to radio indicator for accessibility**

The checkbox indicator has an aria-label="check", but the radio indicator is missing a similar accessibility label.

```diff
- <Circle className="size-2 fill-current" />
+ <Circle className="size-2 fill-current" aria-label="radio selected" />
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between ccc42c98dd12e602bd482995176421da61438ac9 and 4d765d429227ca27623450c3dcc5fb512a2a5e86.

</details>

<details>
<summary>⛔ Files ignored due to path filters (2)</summary>

* `pnpm-lock.yaml` is excluded by `!**/pnpm-lock.yaml`
* `public/assets/8bitcn-context-menu-light.png` is excluded by `!**/*.png`

</details>

<details>
<summary>📒 Files selected for processing (7)</summary>

* `app/docs/components/context-menu/page.tsx` (1 hunks)
* `components/ui/8bit/context-menu.tsx` (1 hunks)
* `config/nav-items.ts` (1 hunks)
* `lib/metadata.ts` (1 hunks)
* `package.json` (1 hunks)
* `public/r/8bit-context-menu.json` (1 hunks)
* `registry.json` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>components/ui/8bit/context-menu.tsx (2)</summary><blockquote>

<details>
<summary>config/fonts.ts (1)</summary>

* `pressStart` (3-6)

</details>
<details>
<summary>lib/utils.ts (1)</summary>

* `cn` (4-6)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (10)</summary><blockquote>

<details>
<summary>package.json (1)</summary>

`19-19`: **Dependency addition is consistent**  
The new `@radix-ui/react-context-menu@^2.2.14` entry is placed alphabetically between `@radix-ui/react-collapsible` and `@radix-ui/react-dialog`, and aligns with the other Radix v2 packages (e.g., `@radix-ui/react-dropdown-menu@^2.x`). No version conflicts spotted.

</details>
<details>
<summary>lib/metadata.ts (1)</summary>

`52-52`: **Context menu metadata added correctly**  
The `contextMenuMetaData` constant follows the established naming convention and alphabetical placement after `datePickerMetaData`. Please verify that the asset file `/assets/8bitcn-context-menu-light.png` exists in the public assets directory.

</details>
<details>
<summary>config/nav-items.ts (1)</summary>

`78-82`: **Navigation item for Context Menu is correct**  
The new "Context Menu" entry is inserted immediately after "Command" and before "Collapsible", with the proper URL and `new: true` flag. This will make the docs page discoverable alongside other components.

</details>
<details>
<summary>registry.json (1)</summary>

`412-425`: **Registry entry for 8-bit Context Menu looks good**  
The new `"8bit-context-menu"` component declaration adheres to the schema, includes no registry dependencies, and correctly points to `components/ui/8bit/context-menu.tsx`.

</details>
<details>
<summary>app/docs/components/context-menu/page.tsx (4)</summary>

`3-10`: **Imports of metadata and ContextMenu primitives are accurate**  
The paths `@/lib/metadata` and `@/components/ui/8bit/context-menu` align with the new files, and the Radix primitives are correctly destructured.

---

`18-24`: **Page metadata setup is correct**  
Using `contextMenuMetaData` for `openGraph.images` ensures the right preview image. Titles and descriptions match the component context.

---

`52-62`: **Interactive example usage is correct**  
The `<ContextMenu>`, `<ContextMenuTrigger>`, `<ContextMenuContent>`, and `<ContextMenuItem>` subcomponents are used as intended, demonstrating the 8-bit styling in a minimal scenario.

---

`68-72`: **InstallationCommands configuration is valid**  
Passing the dynamic `packageUrl` via `NEXT_PUBLIC_BASE_URL` matches the registry descriptor and will render the correct install instructions.

</details>
<details>
<summary>components/ui/8bit/context-menu.tsx (2)</summary>

`1-13`: **Excellent setup for the 8-bit styled component!**

The imports are appropriate, and the "use client" directive is correctly placed at the top for Next.js client components. Using the Press_Start_2P font is perfect for achieving the 8-bit aesthetic.

---

`63-85`: **Great implementation of the 8-bit border effect!**

The layered approach using a relative container with an absolute-positioned border overlay creates an authentic 8-bit appearance. The use of Portal is also appropriate for ensuring the menu isn't constrained by parent containers.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-16T10:10:55Z

Review comments:
diff_hunk: @@ -0,0 +1,91 @@
+import { Metadata } from "next"
+
+import { contextMenuMetaData } from "@/lib/metadata"
+import { Button } from "@/components/ui/8bit/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/8bit/context-menu"
+import { Separator } from "@/components/ui/separator"
+
+import CodeSnippet from "../code-snippet"
+import CopyCommandButton from "../copy-command-button"
+import InstallationCommands from "../installation-commands"
+import { OpenInV0Button } from "../open-in-v0-button"
+
+export const metadata: Metadata = {
+  title: "8-bit Context Menu",
+  description: "Displays an 8-bit context menu component.",
+  openGraph: {
+    images: contextMenuMetaData,
+  },
+}
+
+export default function ButtonPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+        <h1 className="text-3xl font-bold">Context Menu</h1>
+        <CopyCommandButton
+          copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-context-menu.json`}
+          command={"pnpm dlx shadcn@canary add 8bit-context-menu"}
+        />
+      </div>
path: app/docs/components/context-menu/page.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Component function name should reflect Context Menu**  
The default export is named `ButtonPage`, which appears copied from another page. For clarity and consistency, rename it to something like `ContextMenuPage`.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In app/docs/components/context-menu/page.tsx around lines 26 to 35, the default
exported component function is named ButtonPage, which does not reflect the
content of the page. Rename the function from ButtonPage to ContextMenuPage to
improve clarity and maintain consistency with the page's purpose.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T10:10:54Z
author_association: NONE
diff_hunk: @@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "8bit-context-menu",
+  "type": "registry:component",
+  "title": "8-bit Context Menu",
+  "description": "A simple 8-bit context menu component",
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/8bit/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Press_Start_2P } from \"next/font/google\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst pressStart = Press_Start_2P({\n  weight: [\"400\"],\n  subsets: [\"latin\"],\n})\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto size-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <div className=\"relative\">\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        className={cn(\n          \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n          pressStart.className,\n          className\n        )}\n        {...props}\n      />\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <svg\n          width=\"50\"\n          height=\"50\"\n          viewBox=\"0 0 256 256\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          stroke=\"currentColor\"\n          strokeWidth=\"0.25\"\n          aria-label=\"check\"\n          className=\"size-9\"\n        >\n          <rect\n            x=\"80\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 80 128)\"\n          ></rect>\n          <rect\n            x=\"96\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 96 144)\"\n          ></rect>\n          <rect\n            x=\"112\"\n            y=\"160\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 112 160)\"\n          ></rect>\n          <rect\n            x=\"128\"\n            y=\"144\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 128 144)\"\n          ></rect>\n          <rect\n            x=\"144\"\n            y=\"128\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 144 128)\"\n          ></rect>\n          <rect\n            x=\"160\"\n            y=\"112\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 160 112)\"\n          ></rect>\n          <rect\n            x=\"176\"\n            y=\"96\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 176 96)\"\n          ></rect>\n          <rect\n            x=\"192\"\n            y=\"80\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"1\"\n            transform=\"rotate(90 192 80)\"\n          ></rect>\n        </svg>\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"size-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:component",
+      "target": "components/ui/8bit/context-menu.tsx"
+    }
+  ]
+}
path: public/r/8bit-context-menu.json
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Proper registry configuration for the component**

The registry configuration is well-structured with appropriate metadata. However, embedding the entire component code directly in the JSON file creates a maintenance challenge.

When the component is updated, you'll need to update both the original file and this registry JSON. Consider using a build script that can automatically generate or update the registry file from the component source to avoid synchronization issues.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In public/r/8bit-context-menu.json lines 1 to 16, the entire component code is
embedded directly in the JSON registry file, which makes maintenance difficult
and error-prone. To fix this, remove the full component code from the JSON file
and instead reference the component source file path only. Implement a build
script or automation that extracts or syncs the component code into the registry
file as needed, ensuring the registry stays up-to-date without manual
duplication.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T10:10:54Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-05-16T10:08:46Z
body: [vc]: #iqGaRRBwPhbtv+KFH1rK9Mcw+zrAsQGkpH/NozCDhNg=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiI4Yml0Y24tdWkiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vb3JjLWRldi84Yml0Y24tdWkvOHJRV1lrS3prQ0ZXNGZObm1tZGFjdmhlUlNnSiIsInByZXZpZXdVcmwiOiI4Yml0Y24tdWktZ2l0LWZlYXQtY29udGV4dC1tZW51LW9yYy1kZXYudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiI4Yml0Y24tdWktZ2l0LWZlYXQtY29udGV4dC1tZW51LW9yYy1kZXYudmVyY2VsLmFwcCJ9LCJyb290RGlyZWN0b3J5IjpudWxsfV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **8bitcn-ui** | ✅ Ready ([Inspect](https://vercel.com/orc-dev/8bitcn-ui/8rQWYkKzkCFW4fNnmmdacvheRSgJ)) | [Visit Preview](https://8bitcn-ui-git-feat-context-menu-orc-dev.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/8bitcn-ui-git-feat-context-menu-orc-dev.vercel.app?via=pr-comment-feedback-link) | May 16, 2025 10:09am |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-16T10:08:49Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

A new 8-bit styled context menu component suite was implemented using Radix UI primitives and custom pixel-art theming. This includes a full set of React components, documentation, and a demo page. The navigation, registry, and metadata were updated to include the new component, and the necessary Radix UI dependency was added.

## Changes

| File(s)                                                                 | Change Summary                                                                                                                                                                                                                   |
|-------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| components/ui/8bit/context-menu.tsx<br>public/r/8bit-context-menu.json  | Introduced a complete 8-bit themed context menu React component library, wrapping Radix UI primitives with custom styling, indicators, and subcomponents for pixel-art UI.                                                       |
| app/docs/components/context-menu/page.tsx                               | Added a new documentation/demo page for the 8-bit context menu, including metadata, usage instructions, and interactive examples.                                                         |
| config/nav-items.ts                                                     | Added a "Context Menu" entry to the main navigation array for visibility in the site navigation.                                                                                          |
| lib/metadata.ts                                                         | Exported a new constant for the context menu's OpenGraph image metadata.                                                                                                                  |
| registry.json                                                           | Registered the new "8bit-context-menu" component in the component registry with metadata and file references.                                                                             |
| package.json                                                            | Added `@radix-ui/react-context-menu` as a new dependency to support the context menu implementation.                                                                                      |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant ContextMenuTrigger
    participant ContextMenuContent
    participant ContextMenuItem

    User->>ContextMenuTrigger: Right-clicks trigger element
    ContextMenuTrigger->>ContextMenuContent: Opens context menu
    ContextMenuContent->>User: Displays menu items (Profile, Billing, etc.)
    User->>ContextMenuItem: Selects a menu item
    ContextMenuItem->>ContextMenuContent: Handles selection (e.g., closes menu)
```

## Poem

> 🐰  
> In pixel dreams, a menu appears,  
> With borders dashed and retro cheers.  
> Right-click, explore, the options grow—  
> Profile, Billing, all in a row.  
> A rabbit hops through UI delight,  
> 8-bit magic, menus bright!  
> Contextual joy, both day and night.  
>

<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->

> [!WARNING]
> There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
> 
> <details>
> <summary>🔧 ESLint</summary>
> 
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
> 
> <details>
> <summary>app/docs/components/context-menu/page.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 9.26.0
> 
> ESLint couldn't find the plugin "eslint-plugin-react-hooks".
> 
> (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-react-hooks@latest --save-dev
> 
> The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js".
> 
> If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
> 
> 
> </details>
> 
> <details>
> <summary>config/nav-items.ts</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 9.26.0
> 
> ESLint couldn't find the plugin "eslint-plugin-react-hooks".
> 
> (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-react-hooks@latest --save-dev
> 
> The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js".
> 
> If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
> 
> 
> </details>
> 
> <details>
> <summary>lib/metadata.ts</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 9.26.0
> 
> ESLint couldn't find the plugin "eslint-plugin-react-hooks".
> 
> (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-react-hooks@latest --save-dev
> 
> The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js".
> 
> If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
> 
> 
> </details>
> 
> + 1 others
> 
> </details>

<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->

<!-- announcements_start -->

> [!NOTE]
> <details>
> <summary>⚡️ AI Code Reviews for VS Code, Cursor, Windsurf</summary>
> 
> CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
> Learn more [here](http://coderabbit.ai/ide).
> 
> </details>

---

> [!NOTE]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=TheOrcDev/8bitcn-ui&utm_content=190):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE