# Popover

> An anchored panel for filters, forms and details.

Component · Free · https://lodeui.com/components/popover

## When to use

- Small interactive panels anchored to a button: filters, share, quick edit.

## When not to use

- Lists of actions: use a dropdown menu.
- Plain hints: use a tooltip.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/popover.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Popover } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

export function Share() {
  return (
    <Popover trigger={<Button variant="outline">Share</Button>} align="end">
      {(close) => (
        <div className="space-y-2 p-3">
          <p className="text-sm">Anyone with the link can view.</p>
          <Button size="sm" onClick={close}>Done</Button>
        </div>
      )}
    </Popover>
  );
}
```

## API reference

### Popover

A dialog panel anchored to its trigger. Children can be a function that receives close().

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactElement` | – | A button; ARIA and handlers are added. |
| children | `ReactNode \| (close) => ReactNode` | – | Panel content. |
| align | `"start" \| "center" \| "end"` | `"start"` | Horizontal alignment. |
| side | `"bottom" \| "top"` | `"bottom"` | Placement. |
| open / onOpenChange | `boolean` | – | Optional control. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open from the trigger |
| Esc | Close and return focus |

## Accessibility

- The panel is role="dialog"; the trigger has aria-expanded and aria-controls.

## Motion

- Scales in from the trigger side.

## Responsive behavior

- Keep panels under 320px wide for phones.

## Performance

- Content renders only while open.

## Notes for AI

- Use the close() render prop to close after an action.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.