@neynar/ui/llm-docs/context-menu-item.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ContextMenuItem

**Type**: component

ContextMenuItem - An actionable item within the context menu Individual menu items that users can interact with. Supports different variants for visual hierarchy and includes automatic icon styling. Items can be clicked, selected via keyboard, and support custom styling.

## JSX Usage

```jsx
import { ContextMenuItem } from '@neynar/ui';

<ContextMenuItem
  asChild={true}
  disabled={true}
  onSelect={handleSelect}
  textValue="value"
  inset={true}
  variant={value}
  className="value"
>
  {/* Your content here */}
</ContextMenuItem>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Merges props with child element instead of rendering wrapper

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: Prevents interaction and dims the item visually

### onSelect
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: Callback fired when item is selected (via mouse or keyboard)

### textValue
- **Type**: `string`
- **Required**: No
- **Description**: Custom text for typeahead navigation when content is complex

### inset
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to indent the item for alignment with icon-based items

### variant
- **Type**: `"default" | "destructive"`
- **Required**: No
- **Description**: Visual variant ("default" for normal actions, "destructive" for dangerous actions)

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for custom styling

### children
- **Type**: `React.ReactNode`
- **Required**: Yes
- **Description**: Content of the menu item (text, icons, shortcuts, etc.)

## Examples

### Example 1
```tsx
<ContextMenuItem onSelect={() => console.log('Edit selected')}>
  <Edit className="mr-2 h-4 w-4" />
  Edit
  <ContextMenuShortcut>⌘E</ContextMenuShortcut>
</ContextMenuItem>
```
### Example 2
```tsx
<ContextMenuItem variant="destructive" onSelect={handleDelete}>
  <Trash2 className="mr-2 h-4 w-4" />
  Delete
</ContextMenuItem>
```
### Example 3
```tsx
// With custom text value for typeahead
<ContextMenuItem
  textValue="Copy to clipboard"
  onSelect={handleCopy}
>
  <Copy className="mr-2 h-4 w-4" />
  Copy <span className="text-muted-foreground">to clipboard</span>
</ContextMenuItem>
```