Shadcn Popover Components

Shadcn Popover Component

The Shadcn Popover is a floating panel that opens next to a trigger and can hold any content: a small form, a list of notifications, share options or a user profile. It lets people act on something in place, without leaving the page or opening a full modal, and it closes as soon as they click away.

Popovers work best for small, interactive tasks, and that is what these shadcn popover variants show: an inline form, a notification list, step by step onboarding tips, a share panel, a feedback box and a profile card. The panel is built with shadcn/ui, React and Tailwind CSS on the popover primitive from Radix UI or Base UI, which handles positioning, collision detection and focus for you.

What is the Shadcn Popover Component?

A popover is made of a trigger and a content panel. Clicking the trigger opens the panel in a portal, positioned on the side you choose and flipped automatically when it would leave the viewport. The panel stays open while the user works inside it and closes on an outside click or when Escape is pressed, returning focus to the trigger. Unlike a tooltip, it is opened on purpose and can contain inputs and buttons.

Use a popover for interactive content tied to one element. For short, read only hints on hover, use a Tooltip, and for a rich preview that appears on hover, use a Hover Card. When the panel only lists actions, a Dropdown Menu gives you menu semantics and arrow key navigation. For larger tasks that need the user's full attention, use a Sheet or an Alert Dialog.

Anatomy of the Shadcn Popover

6 Shadcn Popover Variants

Each popover variant listed here is previewed live at the top of this page, together with its source code and install command.

• Form in a popover: A Dimensions panel with labelled inputs for width, max width, height and max height.
• Notifications: A bell button with an unread count badge that opens a notification list with unread dots and a Mark all as read action.
• Step by step tips: A tooltip like popover opened above the trigger that walks users through three onboarding tips with a step counter, a Next button and a Start over link on the last step.
• Share: A Share code panel with icon buttons for embed, X, Facebook and email, a read only link field and a copy button with a tooltip and a check mark confirmation.
• Feedback: A Feedback button that opens a textarea and a Send feedback button for quick product input.
• Profile card: An avatar trigger with the user's name and handle that opens a card with their email, a short bio and View Profile and Message buttons.

How to Install the Shadcn Popover Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a popover variant by its name:

npx shadcn@latest add @shadcnuikit/popover1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Popover Component

Wrap a Button in PopoverTrigger with asChild and put any content inside PopoverContent. Use align and side to control where it opens.

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export function RenameProject() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Rename</Button>
      </PopoverTrigger>
      <PopoverContent align="start">
        <PopoverHeader>
          <PopoverTitle>Rename project</PopoverTitle>
          <PopoverDescription>
            The new name is visible to your team.
          </PopoverDescription>
        </PopoverHeader>
        <div className="grid gap-2">
          <Label htmlFor="project-name">Name</Label>
          <Input id="project-name" defaultValue="Marketing site" />
        </div>
      </PopoverContent>
    </Popover>
  )
}

Why Use the Shadcn Popover Component

• Work in context: Users edit, share or filter right next to the element they care about, without losing their place.
• Any content: Forms, lists, images and buttons all fit, unlike a tooltip that only holds text.
• Smart positioning: The panel flips and shifts to stay on screen and animates in from the side it opens on.
• Accessible focus: Focus moves into the panel when it opens and back to the trigger when it closes.
• Themeable: Background, ring and radius come from your theme tokens and follow dark mode.

Common Popover Use Cases

• Date and color pickers: A Calendar or color picker opened from an input or button.
• Notification centers: A bell icon that opens the latest updates.
• Inline editing: Rename an item or change a setting without a new page.
• Share menus: Copy a link or share to email and social networks.
• Feedback widgets: A small form for comments or bug reports.
• Searchable selects: A Command list inside a popover, the base of most comboboxes.

Customizing the Shadcn Popover

Pass a className to PopoverContent to change its width, padding or rounding, and use side, align and sideOffset to place it. The content exposes data-side and data-state, so you can tune the enter and exit animation per side. Colors follow your theme variables; generate a palette with the free Theme Generator.

To close the popover after a form is saved, control it with React state:

const [open, setOpen] = useState(false)

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline">Feedback</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80" side="top">
    <form onSubmit={() => setOpen(false)}>...</form>
  </PopoverContent>
</Popover>

Popover Accessibility and Keyboard Support

The trigger is a button with aria-haspopup, aria-expanded and aria-controls, and the content has role="dialog". When the popover opens, focus moves into it; when it closes, focus returns to the trigger. Give the panel a visible title, and add an aria-label to icon only triggers such as a bell or share button.

Popover Best Practices

• Keep popovers small and focused on one task; move longer flows into a sheet or a page.
• Always open popovers on click, not on hover, so touch and keyboard users can reach them.
• Use a Tooltip instead when the content is only a short label.
• Close the popover after the user saves or picks a value, using the controlled open state.
• Do not nest popovers inside popovers; it makes focus and dismissal hard to follow.
• Label icon only triggers and give the panel a clear title.

Components Related to Popover

Shadcn Popover FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.