Docs › Components › Popover

Shadcn Popover

The shadcn/ui Popover shows rich floating content anchored to a trigger, opened on click, and styled with Tailwind CSS v4. Built on Base UI, it traps focus while open and positions itself to stay in view. Popovers hold quick forms and detail panels across ShadcnStore blocks.

Key features

• Click-triggered floating panel for arbitrary content.
• Positions and flips to stay within the viewport.
• Renders in a portal so it is never clipped.
• Focus management and click-outside to close.
• Trigger composes with any element via the render prop.

Installation

npx shadcn@latest add popover

Usage

import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"

export function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>Open</PopoverTrigger>
      <PopoverContent>Place any content here.</PopoverContent>
    </Popover>
  )
}

Positioning

Control where the panel opens with align (start, center, end) and side (top, right, bottom, left) on PopoverContent. Open each to compare alignment.

<PopoverContent align="start" side="bottom" sideOffset={8}>…</PopoverContent>

Composition

Use the render prop on PopoverTrigger to compose with a Button or other element. Put label text as children on the outer component:

<PopoverTrigger render={<Button variant="outline" />}>Open</PopoverTrigger>

Accessibility

• Focus moves into the popover on open and returns to the trigger on close.
• Give an icon-only trigger an aria-label.
• Keep the trigger a real button so keyboard and screen-reader users can open the popover.

When to use the Popover

Use a Popover for interactive or richer content anchored to a control: a small form, a date or color picker, or extra options. For a short non-interactive hint use a Tooltip; for a list of actions use a Dropdown Menu; for a blocking task use a Dialog.

Used in these blocks

• Widgets: quick-edit panels.
• Datatables: column and filter popovers.
• App shells: notification panels.

Related components

A Popover is opened by a Button and often contains a Calendar (as in a Date Picker) or a small Form. For action lists use a Dropdown Menu.

FAQ

What is the shadcn popover used for?

The Popover shows rich floating content on click, such as a small form, a color picker, or extra details anchored to a trigger.

What is the difference between Popover and Tooltip?

Popover opens on click and can hold interactive content. Tooltip opens on hover or focus and is for short, non-interactive labels only.

What is the difference between Popover and Dropdown Menu?

Popover holds arbitrary content. Dropdown Menu is specifically a list of actions with menu keyboard semantics.

How do I position the popover?

Set side, align, and sideOffset on PopoverContent to control where it opens relative to the trigger.