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

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

# Command

**Type**: component

Command - A fast, composable command menu for search and navigation Built on the cmdk primitive, this component provides a powerful command palette interface with search, filtering, and keyboard navigation. Perfect for creating search interfaces, command palettes, and action menus with full accessibility support. Features advanced filtering with fuzzy search, keyboard shortcuts, nested navigation, asynchronous loading states, and comprehensive accessibility patterns.

## JSX Usage

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

<Command
  label="value"
  shouldFilter={true}
  filter={[]}
  value="value"
  onValueChange={handleValueChange}
  loop={true}
  disablePointerSelection={true}
  vimBindings={true}
  className="value"
>
  {/* Your content here */}
</Command>
```

## Component Props

### label
- **Type**: `string`
- **Required**: No
- **Description**: Accessibility label for screen readers and assistive technology

### shouldFilter
- **Type**: `boolean`
- **Required**: No
- **Description**: Controls automatic filtering and sorting

### filter
- **Type**: `(value: string, search: string, keywords?: string[]) => number`
- **Required**: No
- **Description**: Custom filter function for ranking items based on search

### value
- **Type**: `string`
- **Required**: No
- **Description**: Currently selected item value for controlled usage

### onValueChange
- **Type**: `(value: string) => void`
- **Required**: No
- **Description**: Callback fired when selected item changes

### loop
- **Type**: `boolean`
- **Required**: No
- **Description**: Enables circular navigation through items

### disablePointerSelection
- **Type**: `boolean`
- **Required**: No
- **Description**: Prevents mouse selection behavior

### vimBindings
- **Type**: `boolean`
- **Required**: No
- **Description**: Enables Vim-style navigation keybindings

### 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 menu
<Command label="Main Menu">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```
### Example 2
```tsx
// Controlled command menu with custom filtering
const [value, setValue] = useState('');
const [search, setSearch] = useState('');
<Command
  value={value}
  onValueChange={setValue}
  filter={(value, search, keywords) => {
    const extended = value + ' ' + (keywords?.join(' ') || '');
    return extended.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
  }}
  loop
>
  <CommandInput
    value={search}
    onValueChange={setSearch}
    placeholder="Search..."
  />
  <CommandList>
    <CommandItem value="apple" keywords={['fruit', 'red']}>
      Apple
    </CommandItem>
  </CommandList>
</Command>
```
### Example 3
```tsx
// Command dialog with keyboard shortcut
const [open, setOpen] = useState(false);
useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      setOpen((open) => !open);
    }
  };
  document.addEventListener("keydown", down);
  return () => document.removeEventListener("keydown", down);
}, []);
<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandGroup heading="Actions">
      <CommandItem onSelect={() => console.log("New file")}>
        New File
        <CommandShortcut>⌘N</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>
```