Popover Samples

Visually similar to Hover Card but semantically different.

ComboboxMultiple AlignmentsAlternate Anchor

Basic

Uncontrolled example using `PopoverTrigger` and `PopoverContent`.

This popover closes automatically when you click outside or select actions.

Images use `ap-icon.svg` via `next/Image`. Links use `next/Link`.

Uncontrolled

Controlled

Uses `open` and `onOpenChange`. Includes a small settings form.

Theme: system • Newsletter: true

Controlled`modal` traps focus while open.

Command List

Searchable list using `Command` inside the popover.

CommandKeyboard-friendly

Profile Card

Mixed content: media, links, inputs, and a checklist.

CardLight/dark compatible

Positions

Examples of `side` and `align` combinations.

PlacementCollision handling enabled

Anchor

Explicitly set an anchor with `PopoverAnchor` (useful in complex layouts).

Choose a date

The anchor can be any element. The popover will position relative to it instead of the trigger.

Loading…