# Popover

Host: Base UI. Path: transitions. Preset: `scale-fade`. Built against [@base-ui/react 1.5.0](https://www.npmjs.com/package/@base-ui/react/v/1.5.0).

The origin chain falls back to the Base UI variable when the Radix one is absent, so one rule serves both libraries.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Base UI documentation](https://base-ui.com/react/components/popover)

The same component in other hosts: [Radix UI](/radix/popover.md), [No library](/native/popover.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
Popover.Root
  Popover.Trigger
  Popover.Portal
    Popover.Positioner
      Popover.Popup  data-motion="scale-fade"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-ending-style, data-side, --transform-origin` |
| easeful matches | `[data-motion][data-side] { transform-origin: <anchor origin> }` |
| what runs | `transition, origin from the trigger` |
| you write | `<Popover.Popup data-motion="scale-fade" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `scale-fade` | the default |
| `fade` | [fade](/base-ui/popover#motion=fade) |
| `slide-up` | [slide-up](/base-ui/popover#motion=slide-up) |
| `fade slide-up` | [fade slide-up](/base-ui/popover#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/base-ui/popover#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/base-ui/popover.tsx`

```tsx
"use client"

import { Popover } from "@base-ui/react/popover"
import type { DemoProps } from "@/components/demos/props"

export function BaseUiPopover({ motion }: DemoProps) {
  return (
    <Popover.Root>
      <Popover.Trigger className="btn">Open popover</Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={10} collisionPadding={16}>
          <Popover.Popup className="panel" data-motion={motion}>
            <p className="panel__title">Anchored</p>
            <p className="panel__body">
              Base UI publishes its own transform origin, which easeful falls back to when the
              Radix one is absent.
            </p>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  )
}
```