# Popover

Small panel anchored to the button that opened it, growing out from that spot. Its content fades in just after the panel appears, and the whole panel dims away when it closes.

> Composed · Free · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add popover
```

## Import

```tsx
import { Popover } from "@/components/ui/popover/popover";
```

## Props

### Popover

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` | Controlled open state. |
| `defaultOpen?` | `boolean` | Uncontrolled initial state. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `children` | `React.ReactNode` | — |

### PopoverTrigger

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | — |
| `className?` | `string` | — |
| `lit?` | `boolean` | Light before motion: while open, a 1px accent underline lights under the  trigger over timing.instant and the panel waits that long to grow. |

### PopoverContent

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `align?` | `"start" | "center" | "end"` | Horizontal alignment relative to the trigger. Default "center". |
| `side?` | `"top" | "bottom"` | Which side of the trigger to render on. Default "bottom". |
| `sideOffset?` | `number` | Gap between trigger and content. Default 6. |
| `contentWidth?` | `number` | Max content width — the panel hugs content up to this cap, then clamps inside the safe window. Default 224. |
| `material?` | `"solid" | "glass"` | Surface material. "solid" (default) is the opaque popover surface with a soft shadow; "glass" opts into Lumio glass — only over photos/video. |

Source: https://lumioui.com/components/popover