Context Menu

Component 4

About

Here is Context Menu component

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 Component from "@/components/ui/context-menu-1";
import { FeatherEdit, FeatherTrash2, FeatherCopy } from "@subframe/core";

export default function ContextMenuRightClick() {
  return (
    <div className="max-w-sm space-y-4 rounded-lg p-4 ring-1 bg-white text-gray-900 ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700">
      <Component
        trigger={
          <div className="rounded-md border border-zinc-300 p-8 text-center text-sm text-zinc-600 dark:border-zinc-700 dark:text-zinc-300">
            Right-click this box to open the menu
          </div>
        }
      >
        <Component.Item icon={<FeatherEdit />}>Rename</Component.Item>
        <Component.Item icon={<FeatherCopy />}>Duplicate</Component.Item>
        <Component.Divider />
        <Component.Item icon={<FeatherTrash2 />}>Delete</Component.Item>
      </Component>
    </div>
  );
}