> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover

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

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest add popover
  ```

  ```bash yarn theme={null}
  yarn dlx shadcn@latest add popover
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add popover
  ```
</CodeGroup>

## Usage

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

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

## Component API

### Popover

Root popover component. Built on Radix UI Popover.

```tsx theme={null}
function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>)
```

### PopoverTrigger

Trigger element that opens the popover.

```tsx theme={null}
function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>)
```

### PopoverContent

Popover content container with portal rendering.

```tsx theme={null}
function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>)
```

**Props:**

* `align` - Horizontal alignment relative to trigger (default: `"center"`)
* `sideOffset` - Distance from trigger in pixels (default: `4`)

### PopoverAnchor

Optional anchor element for positioning.

```tsx theme={null}
function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>)
```

### PopoverHeader

Header section for title and description.

```tsx theme={null}
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">)
```

### PopoverTitle

Title heading for the popover.

```tsx theme={null}
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">)
```

### PopoverDescription

Description text for the popover.

```tsx theme={null}
function PopoverDescription({
  className,
  ...props
}: React.ComponentProps<"p">)
```

## Examples

### Basic Popover

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

```tsx theme={null}
<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Popover Title</PopoverTitle>
      <PopoverDescription>
        This is a description of the popover content.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

### Alignment

Control horizontal alignment with the `align` prop:

```tsx theme={null}
<Popover>
  <PopoverTrigger render={<Button />}>Open</PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Aligned Start</PopoverTitle>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

### With Form

A popover containing form fields:

```tsx theme={null}
<Popover>
  <PopoverTrigger render={<Button />}>Settings</PopoverTrigger>
  <PopoverContent className="w-80">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
    <div className="grid gap-4">
      <div className="grid grid-cols-3 items-center gap-4">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" className="col-span-2" />
      </div>
      <div className="grid grid-cols-3 items-center gap-4">
        <Label htmlFor="height">Height</Label>
        <Input id="height" defaultValue="25px" className="col-span-2" />
      </div>
    </div>
  </PopoverContent>
</Popover>
```

## API Reference

See the [Radix UI Popover documentation](https://www.radix-ui.com/primitives/docs/components/popover) for additional props and configuration options.