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

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

# Popover

**Type**: component

Popover displays rich content in a portal, triggered by a button A versatile floating panel component built on Radix UI primitives that displays interactive content without navigating away from the current context. Unlike tooltips, popovers support complex layouts, forms, and user interactions while maintaining proper focus management and accessibility standards.

## JSX Usage

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

<Popover
  open={true}
  onOpenChange={handleOpenChange}
  defaultOpen={true}
  modal={true}
  dir={value}
>
  {/* Your content here */}
</Popover>
```

## Component Props

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

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

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

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

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available

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

## Examples

### Example 1
```tsx
// Basic popover with information
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid gap-4">
      <h4 className="font-medium leading-none">Dimensions</h4>
      <p className="text-sm text-muted-foreground">
        Set the dimensions for the layer.
      </p>
    </div>
  </PopoverContent>
</Popover>
```
### Example 2
```tsx
// Controlled popover with form interactions
const [open, setOpen] = useState(false);
<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button>Settings</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium leading-none">Settings</h4>
        <p className="text-sm text-muted-foreground">
          Configure your preferences
        </p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" />
      </div>
    </div>
  </PopoverContent>
</Popover>
```
### Example 3
```tsx
// Positioned popover with custom alignment
<Popover>
  <PopoverTrigger asChild>
    <Button variant="ghost" size="icon">
      <HelpCircle className="h-4 w-4" />
    </Button>
  </PopoverTrigger>
  <PopoverContent side="top" align="start" className="w-80">
    <div className="space-y-2">
      <h4 className="font-medium">Help Information</h4>
      <p className="text-sm text-muted-foreground">
        Additional context and helpful tips for this feature.
      </p>
    </div>
  </PopoverContent>
</Popover>
```