Actions & overlays@neumorphism-ui/context-menu

Context Menu

Preserves Base UI pointer anchoring and keyboard navigation while rendering the popup as a floating neumorphic surface. Compose ordinary, checkable, radio, submenu, and destructive items.

@neumorphism-ui/context-menu

Registry JSON

Preview

Document tools

Saved state

Installation

npx shadcn@latest add @neumorphism-ui/context-menu

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";
import * as React from "react";
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

Example

export default function Example() {
  const [details, setDetails] = React.useState(true);
  const [message, setMessage] = React.useState("Ready");
  return <div className="grid gap-3">
    <ContextMenu>
      <ContextMenuTrigger className="grid min-h-32 place-items-center rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] p-6 [box-shadow:var(--neu-shadow-inset)]">
        Right-click to open the menu
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel>Document</ContextMenuLabel>
        <ContextMenuItem onClick={() => setMessage("Copied")}>Copy<ContextMenuShortcut>⌘C</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuCheckboxItem checked={details} onCheckedChange={setDetails}>Show details</ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
    <p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p>
  </div>;
}

API Reference

Component	Prop	Type	Default	Description
`ContextMenu`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	Controls the menu open state.
`ContextMenuContent`	`side / align / sideOffset`	`Positioner props`	`—`	Adjusts popup placement and spacing relative to the pointer anchor.
`ContextMenuItem`	`disabled`	`boolean`	`false`	Keeps an item visible while preventing execution.
`ContextMenuCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	Controls the state of a checkable menu item.
`ContextMenuRadioGroup`	`value / onValueChange`	`string / (value: string) => void`	`—`	Controls the selection among mutually exclusive radio items.