---
title: Popover
description: Displays rich content in a portal, triggered by a button.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	"github.com/axadrn/shadcn-templ/v2/components/label"
	"github.com/axadrn/shadcn-templ/v2/components/popover"
)

templ PopoverDemo() {
	@popover.Popover() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: popover.Trigger(ctx),
		}) {
			Open popover
		}
		@popover.Content(popover.ContentProps{Class: "w-80"}) {
			<div class="grid gap-4">
				<div class="space-y-2">
					<h4 class="leading-none font-medium">Dimensions</h4>
					<p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
				</div>
				<div class="grid gap-2">
					<div class="grid grid-cols-3 items-center gap-4">
						@label.Label(label.Props{For: "width"}) {
							Width
						}
						@input.Input(input.Props{
							ID:    "width",
							Value: "100%",
							Class: "col-span-2 h-8",
						})
					</div>
					<div class="grid grid-cols-3 items-center gap-4">
						@label.Label(label.Props{For: "maxWidth"}) {
							Max. width
						}
						@input.Input(input.Props{
							ID:    "maxWidth",
							Value: "300px",
							Class: "col-span-2 h-8",
						})
					</div>
					<div class="grid grid-cols-3 items-center gap-4">
						@label.Label(label.Props{For: "height"}) {
							Height
						}
						@input.Input(input.Props{
							ID:    "height",
							Value: "25px",
							Class: "col-span-2 h-8",
						})
					</div>
					<div class="grid grid-cols-3 items-center gap-4">
						@label.Label(label.Props{For: "maxHeight"}) {
							Max. height
						}
						@input.Input(input.Props{
							ID:    "maxHeight",
							Value: "none",
							Class: "col-span-2 h-8",
						})
					</div>
				</div>
			</div>
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add popover
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="popover" title="components/popover/popover.templ" />

<ComponentSource name="popover" title="components/popover/popover.js" />

<ComponentSource name="popover" title="components/floatingui/floating_ui_core.js" />

<ComponentSource name="popover" title="components/floatingui/floating_ui_dom.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/popover"
```

```templ showLineNumbers
@popover.Popover() {
	@button.Button(button.Props{
		Variant:    button.VariantOutline,
		Attributes: popover.Trigger(ctx),
	}) {
		Open Popover
	}
	@popover.Content() {
		@popover.Header() {
			@popover.Title() {
				Title
			}
			@popover.Description() {
				Description text here.
			}
		}
	}
}
```

## Composition

Use the following composition to build a `Popover`:

```text
popover.Popover
├── popover.Trigger
└── popover.Content
```

## Basic

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/popover"
)

templ PopoverBasic() {
	@popover.Popover() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: popover.Trigger(ctx),
		}) {
			Open Popover
		}
		@popover.Content(popover.ContentProps{Side: popover.SideBottom, Align: popover.AlignStart}) {
			@popover.Header() {
				@popover.Title() {
					Dimensions
				}
				@popover.Description() {
					Set the dimensions for the layer.
				}
			}
		}
	}
}
```

## Align

Use the `Align` prop on `popover.Content` to control the horizontal alignment.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/popover"
)

templ PopoverAlignments() {
	<div class="flex gap-6">
		@popover.Popover() {
			@button.Button(button.Props{
				Variant:    button.VariantOutline,
				Size:       button.SizeSm,
				Attributes: popover.Trigger(ctx),
			}) {
				Start
			}
			@popover.Content(popover.ContentProps{
				Side: popover.SideBottom, Align: popover.AlignStart,
				Class:     "w-40",
			}) {
				Aligned to start
			}
		}
		@popover.Popover() {
			@button.Button(button.Props{
				Variant:    button.VariantOutline,
				Size:       button.SizeSm,
				Attributes: popover.Trigger(ctx),
			}) {
				Center
			}
			@popover.Content(popover.ContentProps{
				Side: popover.SideBottom,
				Class:     "w-40",
			}) {
				Aligned to center
			}
		}
		@popover.Popover() {
			@button.Button(button.Props{
				Variant:    button.VariantOutline,
				Size:       button.SizeSm,
				Attributes: popover.Trigger(ctx),
			}) {
				End
			}
			@popover.Content(popover.ContentProps{
				Side: popover.SideBottom, Align: popover.AlignEnd,
				Class:     "w-40",
			}) {
				Aligned to end
			}
		}
	</div>
}
```

## With Form

A popover with form fields inside.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	"github.com/axadrn/shadcn-templ/v2/components/popover"
)

templ PopoverForm() {
	@popover.Popover() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: popover.Trigger(ctx),
		}) {
			Open Popover
		}
		@popover.Content(popover.ContentProps{
			Side: popover.SideBottom, Align: popover.AlignStart,
			Class:     "w-64",
		}) {
			@popover.Header() {
				@popover.Title() {
					Dimensions
				}
				@popover.Description() {
					Set the dimensions for the layer.
				}
			}
			@field.Group(field.GroupProps{Class: "gap-4"}) {
				@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
					@field.Label(field.LabelProps{
						For:   "popover-form-width",
						Class: "w-1/2",
					}) {
						Width
					}
					@input.Input(input.Props{
						ID:    "popover-form-width",
						Value: "100%",
					})
				}
				@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
					@field.Label(field.LabelProps{
						For:   "popover-form-height",
						Class: "w-1/2",
					}) {
						Height
					}
					@input.Input(input.Props{
						ID:    "popover-form-height",
						Value: "25px",
					})
				}
			}
		}
	}
}
```

## API Reference

### Popover

The `popover.Root` component renders no element, it carries the id that links trigger and content.

| Prop | Type     | Default |
| ---- | -------- | ------- |
| `ID` | `string` | -       |

### PopoverTrigger

`popover.Trigger(ctx)` returns the attributes that turn any element into the popover trigger, `popover.TriggerFor(id)` targets a popover outside the current root.

### PopoverContent

The `popover.Content` component is the floating panel.

| Prop          | Type                                             | Default       |
| ------------- | ------------------------------------------------ | ------------- |
| `Side`        | `SideTop \| SideRight \| SideBottom \| SideLeft` | `SideBottom`  |
| `Align`       | `AlignStart \| AlignCenter \| AlignEnd`          | `AlignCenter` |
| `SideOffset`  | `int`                                            | `4`           |
| `AlignOffset` | `int`                                            | `0`           |
| `Class`       | `string`                                         | -             |

### PopoverHeader

The `popover.Header` component wraps the title and description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### PopoverTitle

The `popover.Title` component renders the accessible popover title.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### PopoverDescription

The `popover.Description` component renders the accessible popover description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |