> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/popover.md).

# Popover

The `Popover` component displays rich content in a portal, triggered by a button.

### Preview

<div align="left"><figure><img src="/files/uRgAst8vTAXUXCaDiu3u" alt="Gravity popover component" width="272"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Popover, PopoverTrigger, PopoverContent } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Popover>
      
        <PopoverTrigger asChild>
          <button>Open Popover</button>
        </PopoverTrigger>
        
        <PopoverContent align='center' sideOffset={ 4 }>
          <div>Content goes here.</div>
        </PopoverContent>
        
      </Popover>
    </div>
  );
}

```

### Props

| Prop       | Description                               | Required | Value                                      |
| ---------- | ----------------------------------------- | -------- | ------------------------------------------ |
| align      | alignment of the content                  | optional | string (start/center/end), default: center |
| children   | `Trigger` and `PopoverContent` components | required | components                                 |
| className  | custom styles                             | optional | SCSS or Tailwind                           |
| sideOffset | offset for the popover content            | optional | integer, default: 4                        |

### Notes

* The `Popover` component uses `PopoverPrimitive` from `@radix-ui/react-popover` for the popover functionality.
* The `align` prop specifies the alignment of the popover content and defaults to 'center'.
* The `sideOffset` prop sets the offset for the popover content and defaults to 4.
* The `className` prop allows for custom styling to be applied.
* The `children` prop should include the `PopoverTrigger` and `PopoverContent` components.
* For more details, refer to the [Shadcn Popover documentation](https://ui.shadcn.com/docs/components/popover).