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

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

# PopoverContent

**Type**: component

PopoverContent - The content container for the popover

## JSX Usage

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

<PopoverContent
  side={value}
  align={value}
  sideOffset={0}
  alignOffset={0}
  avoidCollisions={true}
  collisionBoundary={[]}
  collisionPadding={value}
  sticky={value}
  hideWhenDetached={true}
  className="value"
  style={value}
>
  {/* Your content here */}
</PopoverContent>
```

## Component Props

### side
- **Type**: `"top" | "right" | "bottom" | "left"`
- **Required**: No
- **Description**: The preferred side of the trigger to render against ("top" | "right" | "bottom" | "left")

### align
- **Type**: `"start" | "center" | "end"`
- **Required**: No
- **Description**: How to align the popover relative to the trigger ("start" | "center" | "end")

### sideOffset
- **Type**: `number`
- **Required**: No
- **Description**: Distance in pixels from the trigger (default: 4)

### alignOffset
- **Type**: `number`
- **Required**: No
- **Description**: Offset in pixels along the align axis

### avoidCollisions
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to automatically avoid collisions with viewport edges (default: true)

### collisionBoundary
- **Type**: `Element | Element[] | null`
- **Required**: No
- **Description**: Boundary element(s) to consider for collision detection

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

### sticky
- **Type**: `"partial" | "always"`
- **Required**: No
- **Description**: Whether to stick to the boundary edges when colliding ("partial" | "always")

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

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

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### style
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

## Examples

```tsx
// Basic content with default positioning
<PopoverContent>
  <div className="grid gap-4">
    <h4 className="font-medium">Title</h4>
    <p className="text-sm text-muted-foreground">Description</p>
  </div>
</PopoverContent>
// Positioned content with custom width
<PopoverContent side="top" align="start" className="w-80">
  <form className="grid gap-4">
    <Input placeholder="Enter value" />
    <Button type="submit">Save</Button>
  </form>
</PopoverContent>
```