Context Menu

Right-click context action menu built on Radix ContextMenu primitive with data-panel surface styling.

// Radix — @radix-ui/react-context-menu
import { ContextMenu, ContextMenuItem } from "@shavin/ui";

Default usage

Right-click me

Component Source

<ContextMenu
  trigger={
    <div className="flex h-32 w-72 items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-hairline-strong text-sm text-fg-muted">
      Right-click me
    </div>
  }
>
  <ContextMenuItem onSelect={() => alert("Edit")}>Edit</ContextMenuItem>
  <ContextMenuItem onSelect={() => alert("Duplicate")}>Duplicate</ContextMenuItem>
  <ContextMenuItem variant="danger" onSelect={() => alert("Delete")}>
    Delete
  </ContextMenuItem>
</ContextMenu>

Props

Prop	Type	Default	Description
trigger*	ReactNode	—	Target trigger element — right-clicking anywhere inside opens context menu.
children*	ReactNode	—	Context menu content items.
className	string	—	Optional custom class for ContextMenu content panel.
variant	"default" \| "danger"	"default"	—

* required