@neynar/ui/llm-docs/select-content.llm.md

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

# SelectContent

**Type**: component

SelectContent - Container for the dropdown content The dropdown panel that contains all selectable items, groups, and labels. Built on Radix UI Select.Content with Portal rendering for proper layering. Automatically handles scrolling for long lists, collision detection, and positioning relative to the trigger with smooth animations. **Positioning Strategy:** - `popper`: Uses Floating UI for precise positioning with collision detection - `item-aligned`: Aligns content with the selected item for natural feel

## JSX Usage

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

<SelectContent
  asChild={true}
  position={value}
  side={value}
  sideOffset={0}
  align={value}
  alignOffset={0}
  avoidCollisions={true}
  collisionBoundary={value}
  collisionPadding={value}
  arrowPadding={0}
  sticky={value}
  hideWhenDetached={true}
>
  {/* Your content here */}
</SelectContent>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### position
- **Type**: `"item-aligned" | "popper"`
- **Required**: No
- **Description**: No description available

### side
- **Type**: `"top" | "right" | "bottom" | "left"`
- **Required**: No
- **Description**: No description available

### sideOffset
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### align
- **Type**: `"start" | "center" | "end"`
- **Required**: No
- **Description**: No description available

### alignOffset
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### avoidCollisions
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### collisionBoundary
- **Type**: `Element | null | Array<Element | null>`
- **Required**: No
- **Description**: No description available

### collisionPadding
- **Type**: `| number
    | Partial<Record<"top" | "right" | "bottom" | "left", number>>`
- **Required**: No
- **Description**: No description available

### arrowPadding
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### sticky
- **Type**: `"partial" | "always"`
- **Required**: No
- **Description**: No description available

### hideWhenDetached
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic content with multiple items
<SelectContent>
  <SelectItem value="1">Option 1</SelectItem>
  <SelectItem value="2">Option 2</SelectItem>
  <SelectItem value="3">Option 3</SelectItem>
</SelectContent>
```
### Example 2
```tsx
// Item-aligned positioning (default behavior)
<SelectContent position="item-aligned">
  <SelectItem value="apple">Apple</SelectItem>
  <SelectItem value="banana">Banana</SelectItem>
</SelectContent>
```
### Example 3
```tsx
// Popper positioning with custom placement
<SelectContent position="popper" side="top" align="end">
  <SelectItem value="1">Option 1</SelectItem>
  <SelectItem value="2">Option 2</SelectItem>
</SelectContent>
```
### Example 4
```tsx
// Complex content with groups and scrolling
<SelectContent>
  <SelectGroup>
    <SelectLabel>Recent Items</SelectLabel>
    <SelectItem value="recent1">Recently Used 1</SelectItem>
    <SelectItem value="recent2">Recently Used 2</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>All Items</SelectLabel>
    {items.map((item) => (
      <SelectItem key={item.id} value={item.id}>
        {item.label}
      </SelectItem>
    ))}
  </SelectGroup>
</SelectContent>
```