@neynar/ui/llm-docs/command-item.llm.md

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

# CommandItem

**Type**: component

CommandItem - Individual selectable command item Represents a single command or action that can be selected via keyboard or mouse interaction. Supports icons, text, shortcuts, and advanced filtering with keywords. Items can be disabled, have custom values for filtering, and trigger callbacks on selection. The item's value is used for filtering - if not provided, it defaults to the text content. Keywords can be added to improve search matching without affecting the display.

## JSX Usage

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

<CommandItem
  value="value"
  keywords={[]}
  disabled={true}
  onSelect={handleSelect}
  forceMount={true}
  className="value"
>
  {/* Your content here */}
</CommandItem>
```

## Component Props

### value
- **Type**: `string`
- **Required**: No
- **Description**: Unique identifier for filtering and selection (defaults to text content)

### keywords
- **Type**: `string[]`
- **Required**: No
- **Description**: Additional search terms for improved filtering

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: Disables interaction and selection

### onSelect
- **Type**: `(value: string) => void`
- **Required**: No
- **Description**: Callback fired when item is selected with Enter or click

### forceMount
- **Type**: `boolean`
- **Required**: No
- **Description**: Always render even when filtered out

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

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic command item
<CommandItem onSelect={() => console.log("File opened")}>
  Open File
</CommandItem>
```
### Example 2
```tsx
// Command item with icon and shortcut
<CommandItem value="new-document" onSelect={handleCreateDocument}>
  <FileIcon className="mr-2 h-4 w-4" />
  New Document
  <CommandShortcut>⌘N</CommandShortcut>
</CommandItem>
```
### Example 3
```tsx
// Item with keywords for better search
<CommandItem
  value="apple"
  keywords={['fruit', 'red', 'healthy']}
  onSelect={() => selectFruit('apple')}
>
  🍎 Apple
</CommandItem>
```
### Example 4
```tsx
// Disabled item that shows but cannot be selected
<CommandItem disabled>
  <LockIcon className="mr-2 h-4 w-4" />
  Premium Feature
</CommandItem>
```