---
title: "Integrate a popover UI component"
description: "Add a pop-up UI element appearing when a user clicks on a trigger element. More in the docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/popover"
---

# Integrate a popover UI component

Add a pop-up UI element appearing when a user clicks on a trigger element. More in the docs!

A popover element that appears when a user clicks on a trigger element.

> **Interactive demo:** [popover](https://template.tiptap.dev/preview/tiptap-ui-primitive/popover)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add popover
```

## Usage

```tsx
import { Popover, PopoverTrigger, PopoverContent } from '@/components/tiptap-ui-primitive/popover'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button data-style="ghost">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>Popover content goes here</p>
      </PopoverContent>
    </Popover>
  )
}
```

## Props

### Popover

| Name         | Type                    | Default   | Description                          |
| ------------ | ----------------------- | --------- | ------------------------------------ |
| open         | boolean                 | undefined | Controlled open state                |
| onOpenChange | (open: boolean) => void | undefined | Callback when open state changes     |
| defaultOpen  | boolean                 | false     | Default open state                   |
| modal        | boolean                 | false     | Whether to render in a modal context |

### PopoverTrigger

| Name    | Type    | Default | Description                       |
| ------- | ------- | ------- | --------------------------------- |
| asChild | boolean | false   | Whether to merge props with child |

### PopoverContent

| Name   | Type                                   | Default  | Description                       |
| ------ | -------------------------------------- | -------- | --------------------------------- |
| side   | 'top' \| 'right' \| 'bottom' \| 'left' | 'bottom' | Preferred side to display content |
| align  | 'start' \| 'center' \| 'end'           | 'center' | Alignment along the edge          |
| portal | boolean                                | true     | Whether to render in a portal     |