Context Menu

Component

About

Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Context Menu to your project and fits it to your theme.

Code

How Context Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ContextMenu } from "@/components/ui/context-menu";

export default function DefaultDemo() {
  return (
        <ContextMenu>
          <ContextMenu.Trigger>
            <div
              style={{
                width: 300,
                padding: "45px 0",
                border: "1px var(--ds-gray-alpha-600) dashed",
                borderRadius: 4,
                textAlign: "center",
                fontSize: 14,
                color: "var(--ds-gray-1000)"
              }}
            >
              Right click here
            </div>
          </ContextMenu.Trigger>
          <ContextMenu.Content>
            <ContextMenu.Item
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item one
            </ContextMenu.Item>
            <ContextMenu.Item
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item Two
            </ContextMenu.Item>
            <ContextMenu.Item
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item Three
            </ContextMenu.Item>
            <ContextMenu.Item
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item Four
            </ContextMenu.Item>
          </ContextMenu.Content>
        </ContextMenu>
  );
}