Popover

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/popover

Composed components

Manual installation

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

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:

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

Popover

PopoverTrigger

PopoverContent

PopoverHeader

PopoverTitle

PopoverDescription

PopoverBody

PopoverFooter

PopoverClose