# Popover

Anchored context that stays close to its trigger: a pill, a Soft two part panel and a nub pointing back.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/popover
```

## Usage

```tsx
import { Popover, PopoverTrigger } from '@/components/fetaui/popover'
import { InfoIcon } from '@fetaui/react/rounded/info'

export function Example() {
  return (
    <Popover
      title="Dimensions"
      description="Set the dimensions for the layer."
      trigger={<PopoverTrigger icon={<InfoIcon />}>Edit size</PopoverTrigger>}
    >
      {/* a quick form */}
    </Popover>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| trigger | ReactElement | required |
| title | ReactNode |  |
| description | ReactNode |  |
| label | string |  |
| footer | ReactNode |  |
| side | bottom, top, left, right | bottom |
| align | start, center, end | center |
| width | number | 280 |
| open | boolean |  |
| defaultOpen | boolean | false |
| onOpenChange | (open) => void |  |
| animated | boolean | true |

## When to use

- For short tasks and context tied to one control: a quick form, an explanation, a share panel, a filter.

## When not to use

- For previews on hover: use Hover Card.
- When the task needs full attention: use Dialog.
- For a list of actions: use Dropdown Menu.

## Accessibility

- The trigger has aria-expanded and aria-controls.
- The panel is a dialog, labelled by its title.
- Focus moves into the panel and returns to the trigger on close.

## Motion

- The panel grows from its nub over 180 ms on a 0.3 spring, while the trigger lifts in 120 ms.
- Closing folds back to 0.98 in 120 ms.
- A flip is a plain side swap with no motion.
- With reduced motion, it appears in place.