ContextMenu

contextmenu-1779394026053.tsx

'use client'
import { useState, useEffect, useRef } from 'react'

const ITEMS = [
  { label:'New File', icon:'📄', shortcut:'⌘N' },
  { label:'Open', icon:'📂', shortcut:'⌘O' },
  { divider:true },
  { label:'Copy', icon:'📋', shortcut:'⌘C' },
  { label:'Paste', icon:'📥', shortcut:'⌘V' },
  { divider:true },
  { label:'Delete', icon:'🗑️', shortcut:'Del', danger:true },
]

export default function ContextMenu() {
  const [menu, setMenu] = useState(null)
  const menuRef = useRef(null)
  const handleContext = (e) => { e.preventDefault(); setMenu({ x:e.clientX, y:e.clientY }) }
  useEffect(() => {
    const close = () => setMenu(null)
    window.addEventListener('click', close)
    return () => window.removeEventListener('click', close)
  }, [])
  return (
    <div
      onContextMenu={handleContext}
      style={{
        width:'300px', height:'150px', background:'linear-gradient(135deg,#f0f4ff,#e8f0fe)',
        borderRadius:'14px', display:'flex', alignItems:'center', justifyContent:'center',
        border:'2px dashed #c7d2fe', position:'relative', userSelect:'none',
        cursor:'context-menu',
      }}
    >
      <span style={{ color:'#6366f1', fontSize:'14px', fontWeight:500 }}>Right-click anywhere</span>
      {menu && (
        <div ref={menuRef} style={{
          position:'fixed', left:menu.x, top:menu.y, zIndex:1000,
          background:'#1e1e2e', borderRadius:'12px', padding:'6px',
          boxShadow:'0 10px 40px rgba(0,0,0,0.4)', minWidth:'200px',
          animation:'fadeIn 0.15s ease',
        }}>
          <style>{'@keyframes fadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}'}</style>
          {ITEMS.map((item, i) => item.divider ? (
            <div key={i} style={{ height:'1px', background:'#2d2d3d', margin:'4px 0' }} />
          ) : (
            <div key={item.label} style={{
              display:'flex', alignItems:'center', gap:'10px', padding:'8px 12px',
              borderRadius:'8px', cursor:'pointer', color:item.danger ? '#ef4444' : '#e2e8f0',
              fontSize:'13px',
            }}
              onMouseEnter={e => e.currentTarget.style.background='#2d2d3d'}
              onMouseLeave={e => e.currentTarget.style.background='transparent'}
            >
              <span style={{ fontSize:'15px' }}>{item.icon}</span>
              <span style={{ flex:1 }}>{item.label}</span>
              <kbd style={{ fontSize:'10px', color:'#64748b', background:'#16162a', padding:'2px 6px', borderRadius:'4px' }}>{item.shortcut}</kbd>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Right-click context menu with icons, shortcuts and dividers

More from Overlays

'use client';

import React, { useState } from 'react';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  i

AlertDialog

Overlays

'use client';

import { useState, useEffect } from 'react';

interface Command {
  id: number;
  title: string;
  description: string;
}

const commands: Command[] = [
  { id: 1, title: 'New File', description: 'Create a new file' },
  { id: 2, title

CommandPalette

Overlays

'use client'
import { useState, useEffect } from 'react'

const notifications = [
  { id: 1, type: '🎉', title: 'New component published', time: '2m ago', read: false },
  { id: 2, type: '💰', title: 'Pro subscription active', time: '1h ago', read: f

DrawerPanel

Overlays

'use client';

import { useState } from 'react';

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
  const [isDragging, setIsDragging] = useState(false);
  cons

BottomSheet

Overlays