# Popover

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

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





Basic usage of the Popover component.

<ComponentPreview name="popover-demo">
  <div className="flex items-center gap-4 py-8">
    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Open popover
        </Button>
      </PopoverTrigger>

      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="font-medium leading-none">
              Dimensions
            </h4>

            <p className="text-sm text-muted-foreground">
              {"Set the dimensions for the layer."}
            </p>
          </div>

          <div className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="width">
                Width
              </Label>

              <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
            </div>

            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxWidth">
                Max. width
              </Label>

              <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
            </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 h-8" />
            </div>

            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxHeight">
                Max. height
              </Label>

              <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/popover.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open</Button>
      </PopoverTrigger>
      <PopoverContent>Place content for the popover here.</PopoverContent>
    </Popover>
  );
}
```

## Examples [#examples]

### Placement [#placement]

You can use the `side` prop to position the popover content.

<ComponentPreview name="popover-placement">
  <div className="flex items-center gap-4 py-8">
    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Top
        </Button>
      </PopoverTrigger>

      <PopoverContent side="top">
        <p className="text-sm">
          {"Placed at the top."}
        </p>
      </PopoverContent>
    </Popover>

    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Right
        </Button>
      </PopoverTrigger>

      <PopoverContent side="right">
        <p className="text-sm">
          {"Placed at the right."}
        </p>
      </PopoverContent>
    </Popover>

    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Bottom
        </Button>
      </PopoverTrigger>

      <PopoverContent side="bottom">
        <p className="text-sm">
          {"Placed at the bottom."}
        </p>
      </PopoverContent>
    </Popover>

    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Left
        </Button>
      </PopoverTrigger>

      <PopoverContent side="left">
        <p className="text-sm">
          {"Placed at the left."}
        </p>
      </PopoverContent>
    </Popover>
  </div>
</ComponentPreview>

### Alignment [#alignment]

Use the `align` prop to align the popover content.

<ComponentPreview name="popover-alignment">
  <div className="flex items-center gap-4 py-8">
    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Start
        </Button>
      </PopoverTrigger>

      <PopoverContent align="start">
        <p className="text-sm">
          {"Aligned to the start."}
        </p>
      </PopoverContent>
    </Popover>

    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          Center
        </Button>
      </PopoverTrigger>

      <PopoverContent align="center">
        <p className="text-sm">
          {"Aligned to the center."}
        </p>
      </PopoverContent>
    </Popover>

    <Popover>
      <PopoverTrigger>
        <Button variant="outline">
          End
        </Button>
      </PopoverTrigger>

      <PopoverContent align="end">
        <p className="text-sm">
          {"Aligned to the end."}
        </p>
      </PopoverContent>
    </Popover>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `PopoverContent` component extends the `radix-ui` Popover content props and adds the following:

| Prop         | Type     | Default    | Description                                                                            |
| ------------ | -------- | ---------- | -------------------------------------------------------------------------------------- |
| `align`      | `enum`   | `"center"` | The preferred alignment against the anchor (`start`, `center`, `end`).                 |
| `side`       | `enum`   | `"bottom"` | The preferred side of the anchor to render against (`top`, `right`, `bottom`, `left`). |
| `sideOffset` | `number` | `4`        | The distance in pixels from the anchor.                                                |