Popover

Installation

bunx @prototyperco/cli add popover

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/popover.json

npx shadcn@latest add https://prototyper-ui.com/r/popover.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/popover.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/popover.json

This will add the following files to your project:

• components/ui/popover.tsx

Usage

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

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <p>Popover content here.</p>
  </PopoverContent>
</Popover>;

Anatomy

<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle />
      <PopoverDescription />
    </PopoverHeader>
    {/* your content */}
  </PopoverContent>
</Popover>

Examples

Container Padding

Cross Offset

Flipping

Offset

Position

Styling

Data Slots

Use data-slot attributes to target specific parts of the popover:

Customization Examples

/* Make popover wider */
[data-slot="popover-content"] {
  @apply min-w-[16rem];
}

/* Style the popover title */
[data-slot="popover-title"] {
  @apply text-base font-bold;
}

{
  /* Override styles via className */
}
<PopoverContent className="w-80 p-4">
  <PopoverHeader className="mb-4">
    <PopoverTitle>Settings</PopoverTitle>
  </PopoverHeader>
  {/* ... */}
</PopoverContent>;

API Reference

Popover

Root component that manages open/close state.

All Base UI Popover.Root props are forwarded via ...props.

PopoverTrigger

Element that toggles the popover when clicked.

All Base UI Popover.Trigger props are forwarded via ...props.

PopoverContent

The popup panel rendered inside a portal with a positioner.

All Base UI Popover.Popup props are forwarded via ...props.

PopoverHeader

Flex column container for title and description.

Standard div props are forwarded via ...props.

PopoverTitle

Accessible title for the popover.

All Base UI Popover.Title props are forwarded via ...props.

PopoverDescription

Accessible description for the popover.

All Base UI Popover.Description props are forwarded via ...props.

Accessibility

Keyboard Interactions

ARIA Attributes

• PopoverContent receives role="dialog" by default via Base UI.
• aria-labelledby is automatically linked to PopoverTitle when present.
• aria-describedby is automatically linked to PopoverDescription when present.
• Focus moves into the popover when it opens.
• Focus returns to the trigger element when the popover closes.

Related