@radix-ui/react-popper

Basic Popper

This example demonstrates a basic popper setup with an anchor element and a popper content element.

```jsx
import { Popper } from '@radix-ui/react-popper';

function BasicPopper() {
  return (
    <Popper>
      <Popper.Anchor>
        <button>Anchor</button>
      </Popper.Anchor>
      <Popper.Content>
        <div>Popper Content</div>
      </Popper.Content>
    </Popper>
  );
}
```

Custom Positioning

This example shows how to customize the positioning of the popper content relative to the anchor element by setting the `placement` prop.

```jsx
import { Popper } from '@radix-ui/react-popper';

function CustomPositioningPopper() {
  return (
    <Popper placement="right">
      <Popper.Anchor>
        <button>Anchor</button>
      </Popper.Anchor>
      <Popper.Content>
        <div>Popper Content</div>
      </Popper.Content>
    </Popper>
  );
}
```

Transition Effects

This example demonstrates how to add transition effects to the popper content by controlling the `open` state and using CSS for animations.

```jsx
import { Popper } from '@radix-ui/react-popper';
import { useState } from 'react';

function TransitionPopper() {
  const [open, setOpen] = useState(false);

  return (
    <Popper open={open} onOpenChange={setOpen}>
      <Popper.Anchor>
        <button onClick={() => setOpen(!open)}>Toggle Popper</button>
      </Popper.Anchor>
      <Popper.Content>
        <div className="popper-content">Popper Content</div>
      </Popper.Content>
    </Popper>
  );
}
```