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

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

# CommandGroup

**Type**: component

CommandGroup - Groups related command items under a heading Organizes command items into labeled sections with optional headings for better organization and navigation. Groups provide semantic structure for screen readers and can be hidden/shown based on whether they contain matching items. Groups automatically manage their visibility - if all contained items are filtered out, the entire group is hidden. Use `forceMount` to override this behavior.

## JSX Usage

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

<CommandGroup
  heading={value}
  value="value"
  forceMount={true}
  className="value"
>
  {/* Your content here */}
</CommandGroup>
```

## Component Props

### heading
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: The group heading text or component displayed above items

### value
- **Type**: `string`
- **Required**: No
- **Description**: Group identifier for programmatic control

### forceMount
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to always render the group even when hidden

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

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

## Examples

### Example 1
```tsx
<CommandGroup heading="Recent Files">
  <CommandItem>document.pdf</CommandItem>
  <CommandItem>presentation.pptx</CommandItem>
</CommandGroup>
<CommandGroup heading="Actions">
  <CommandItem>New File</CommandItem>
  <CommandItem>Open File</CommandItem>
</CommandGroup>
```
### Example 2
```tsx
// Group with custom heading component
<CommandGroup
  heading={
    <div className="flex items-center gap-2">
      <FolderIcon className="h-4 w-4" />
      <span>Projects</span>
    </div>
  }
>
  <CommandItem>Project A</CommandItem>
  <CommandItem>Project B</CommandItem>
</CommandGroup>
```
### Example 3
```tsx
// Group that always shows even when filtered
<CommandGroup heading="Important" forceMount>
  <CommandItem>Critical Action</CommandItem>
</CommandGroup>
```