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

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

# CommandDialog

**Type**: component

CommandDialog - Modal dialog wrapper for command menu Presents the command menu in a modal dialog overlay, perfect for application-wide command palettes triggered by keyboard shortcuts like Cmd+K or Ctrl+K. Built on Radix UI Dialog with proper focus management, portal rendering, and accessibility. The dialog automatically handles focus trapping, scroll locking, and provides screen reader announcements. Use `container` prop to specify custom portal target.

## JSX Usage

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

<CommandDialog
  open={true}
  onOpenChange={handleOpenChange}
  title="value"
  description="value"
  showCloseButton={true}
  container={value}
  className="value"
>
  {/* Your content here */}
</CommandDialog>
```

## Component Props

### open
- **Type**: `boolean`
- **Required**: No
- **Description**: Controls dialog visibility state

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: Callback when dialog open state changes

### title
- **Type**: `string`
- **Required**: No
- **Description**: Screen reader accessible title

### description
- **Type**: `string`
- **Required**: No
- **Description**: Screen reader description

### showCloseButton
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to show the X close button

### container
- **Type**: `HTMLElement | null`
- **Required**: No
- **Description**: Custom portal container element for rendering

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

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

## Examples

### Example 1
```tsx
// Command palette 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>Create New File</CommandItem>
      <CommandItem>Open Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>
```
### Example 2
```tsx
// Custom portal container
const containerRef = useRef<HTMLDivElement>(null);
<>
  <CommandDialog
    open={open}
    onOpenChange={setOpen}
    container={containerRef.current}
    title="Quick Actions"
    description="Find and run commands quickly"
  >
    <CommandInput />
    <CommandList>
      <CommandItem>Action 1</CommandItem>
    </CommandList>
  </CommandDialog>
  <div ref={containerRef} />
</>
```