Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Popover
description: Displays rich content in a floating layer, triggered by a button.
---

```astro live props={{ name: 'popover' }}
---
import { buttonVariants } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
---

<Popover>
  <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

## Installation

```bash
npx shadcn@latest add @fulldev/popover
```

## Usage

```ts
import { buttonVariants } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
```

```astro
<Popover>
  <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Popover title</PopoverTitle>
      <PopoverDescription>Add any rich content here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

## Composition

Use the following composition to build a `Popover`:

```text
Popover
├── PopoverTrigger
└── PopoverContent
    └── PopoverHeader
        ├── PopoverTitle
        └── PopoverDescription
```

## Examples

### Alignments

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

```astro live
---
import { buttonVariants } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
---

<div class="flex flex-wrap gap-3">
  <Popover>
    <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
      Start
    </PopoverTrigger>
    <PopoverContent align="start" class="w-56">
      Aligned to the start edge of the trigger.
    </PopoverContent>
  </Popover>

  <Popover>
    <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
      Center
    </PopoverTrigger>
    <PopoverContent align="center" class="w-56">
      Centered relative to the trigger.
    </PopoverContent>
  </Popover>

  <Popover>
    <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
      End
    </PopoverTrigger>
    <PopoverContent align="end" class="w-56">
      Aligned to the end edge of the trigger.
    </PopoverContent>
  </Popover>
</div>
```

### With Form

A popover with form fields inside.

```astro live
---
import { Button, buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
---

<Popover>
  <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
    Edit dimensions
  </PopoverTrigger>
  <PopoverContent class="w-80">
    <div class="grid gap-1.5">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-muted-foreground text-sm">
        Set the dimensions for the layer.
      </p>
    </div>
    <div class="grid gap-3">
      <div class="grid gap-2">
        <Label for="popover-width">Width</Label>
        <Input id="popover-width" defaultValue="100%" />
      </div>
      <div class="grid gap-2">
        <Label for="popover-max-width">Max width</Label>
        <Input id="popover-max-width" defaultValue="24rem" />
      </div>
    </div>
    <div class="flex justify-end">
      <Button size="sm">Save changes</Button>
    </div>
  </PopoverContent>
</Popover>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/popover) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/popover/README.md) for more information on interactivity.