# Popover · JGuang UI

> Displays rich content in a portal, triggered by a button.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/popover
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `popover-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/popover


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Install the following dependencies:


```bash
npm install @base-ui/react
```


### Copy and paste the following code into your project.


[View complete source: components/ui/popover.tsx](/r/jguang-ui/base/popover.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
```

```tsx showLineNumbers
<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

## Composition

Use the following composition to build a `Popover`:

```text
Popover
├── PopoverTrigger
└── PopoverContent
```

## Basic

A simple popover with a header, title, and description.


> Example `popover-basic`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/popover


## Align

Use the `align` prop on `PopoverContent` to control the horizontal alignment.


> Example `popover-alignments`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/popover


## With Form

A popover with form fields inside.


> Example `popover-form`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/popover


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `popover-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/popover


## API Reference

See the [Base UI Popover](https://base-ui.com/react/components/popover#api-reference) documentation.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt