Context Menu
The 16px-radius menu surface opened from a right-click or long-press, with icons, shortcuts and destructive rows.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { ContextMenuRounded } from '@/components/component-kit/items/context-menu-rounded';
export function Example() { return ( <ContextMenuRounded items={[ { id: 'rename', label: 'Rename', shortcut: '⏎' }, { id: 'dup', label: 'Duplicate', shortcut: '⌘D' }, { id: 'sep', type: 'separator' }, { id: 'del', label: 'Delete', destructive: true }, ]} > <div className="rounded-2xl border p-8 text-sm">Right-click me</div> </ContextMenuRounded> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ContextMenuRoundedItem[] | — | Rows with optional icon, shortcut and destructive styling, plus separators and labels. |
children | ReactNode | — | The surface that opens the menu. |