Popover — dir/ui

Open arbitrary content in a panel anchored to a trigger button.

# Popover

Open arbitrary content in a panel anchored to a trigger button.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/popover#v0.1.2
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.2/registry.json)

Requires React 19, Tailwind CSS 4 and shadcn initialized with Base UI. Registry target placeholders resolve through components.json: @ui, @components, @hooks and @lib. Imports below use the conventional @/ prefix for illustration; the CLI rewrites them to your configured aliases. Shared components are installed once through registryDependencies. Theme CSS is imported by the UI modules. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.

## PopoverPanel

```tsx
import { PopoverPanel } from '@/components/ui/popover-panel.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| trigger | ReactElement | Required | A button or other element; render merges its events and ref. |
| title / children | ReactNode | Required |  |
| description | ReactNode | — |  |
| open / onOpenChange | boolean / (open: boolean) => void | Uncontrolled |  |
| align | 'start' \| 'center' \| 'end' | 'start' |  |
| side | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' |  |
| width | number \| string | 320 |  |

Escape or an outside click closes the panel and restores trigger focus. Lower-level Popover, Trigger, and Content exports are available from components/ui/popover.tsx.