A small, floating UI element that appears near a trigger to show contextual information or actions. It enhances user experience with non-intrusive overlays.

RAC

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/popover

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

button dialog

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install react-aria-components

Anatomy

import {
  Popover,
  PopoverBody,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverFooter,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Dialog } from "@/components/ui/dialog"

<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>
    <Dialog>
      <PopoverHeader>
        <PopoverTitle>Popover Title</PopoverTitle>
        <PopoverDescription>Popover Description</PopoverDescription>
      </PopoverHeader>
      <PopoverBody>Popover Body</PopoverBody>
      <PopoverFooter>
        <PopoverClose>Close</PopoverClose>
        <PopoverClose>Confirm</PopoverClose>
      </PopoverFooter>
    </Dialog>
  </PopoverContent>
</Popover>

Examples

Controlled

You can control the popover programmatically.

Overlay arrow

Popovers come with an arrow that points to the trigger element, but it’s hidden by default. To display it, pass the arrow prop.

Placement

You can change the placement of the popover by passing the placement prop.

The list above shows the primary directions, but you can also use specific placements like bottom left or top right. Here are all the available placement options:

Primary Direction	Placement
`bottom`	`bottom`, `bottom left`, `bottom right`, `bottom start`, `bottom end`
`top`	`top`, `top left`, `top right`, `top start`, `top end`
`left`	`left`, `left top`, `left bottom`
`start`	`start`, `start top`, `start bottom`
`right`	`right`, `right top`, `right bottom`
`end`	`end`, `end top`, `end bottom`

Custom close

You can easily close the popover by clicking outside of it, or add a custom close button inside using Popover.Close. Just make sure everything is wrapped inside a Dialog.

Popover trigger

All the examples above use <Button/> as the trigger, but what if you wanna switch it up, like using <Avatar/> instead? No sweat, just roll with PopoverTrigger like this:

Component API

The Popover component controls the popover trigger and content.

PopoverTrigger

The PopoverTrigger component defines the element that opens a popover.

Prop	Type	Default
`className`	`string`	-

PopoverContent

The PopoverContent component renders floating popover content.

Prop	Type	Default
`arrow`	`boolean`	`false`
`className`	`string`	-

PopoverHeader

The PopoverHeader component groups the popover title and description.

Prop	Type	Default
`className`	`string`	-
`description`	`string`	-
`title`	`string`	-

PopoverTitle

The PopoverTitle component renders the popover heading.

Prop	Type	Default
`className`	`string`	-

PopoverDescription

The PopoverDescription component renders supporting text inside a popover.

Prop	Type	Default
`className`	`string`	-

PopoverBody

The PopoverBody component wraps the main popover content.

Prop	Type	Default
`className`	`string`	-

PopoverFooter

The PopoverFooter component groups popover actions.

Prop	Type	Default
`className`	`string`	-

PopoverClose

The PopoverClose component renders a button that closes the popover.

Prop	Type	Default
`className`	`string`	-
`intent`	`"primary" \| "secondary" \| "warning" \| "danger" \| "success" \| "outline" \| "plain"`	`plain`

See the React Aria for the full API reference.

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Modal

Sheet

Popover