Skip to main content

​
Installation

npx shadcn@latest add popover

​
Usage

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

​
Component API

​
Popover

Root popover component. Built on Radix UI Popover. 
function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>)

​
PopoverTrigger

Trigger element that opens the popover. 
function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>)

​
PopoverContent

Popover content container with portal rendering. 
function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>)
Props:
  • align - Horizontal alignment relative to trigger (default: "center")
  • sideOffset - Distance from trigger in pixels (default: 4)

​
PopoverAnchor

Optional anchor element for positioning. 
function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>)

​
PopoverHeader

Header section for title and description. 
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">)

​
PopoverTitle

Title heading for the popover. 
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">)

​
PopoverDescription

Description text for the popover. 
function PopoverDescription({
  className,
  ...props
}: React.ComponentProps<"p">)

​
Examples

​
Basic Popover

A simple popover with a header, title, and description: 
<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Popover Title</PopoverTitle>
      <PopoverDescription>
        This is a description of the popover content.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

​
Alignment

Control horizontal alignment with the align prop: 
<Popover>
  <PopoverTrigger render={<Button />}>Open</PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Aligned Start</PopoverTitle>
    </PopoverHeader>
  </PopoverContent>
</Popover>

​
With Form

A popover containing form fields: 
<Popover>
  <PopoverTrigger render={<Button />}>Settings</PopoverTrigger>
  <PopoverContent className="w-80">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
    <div className="grid gap-4">
      <div className="grid grid-cols-3 items-center gap-4">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" className="col-span-2" />
      </div>
      <div className="grid grid-cols-3 items-center gap-4">
        <Label htmlFor="height">Height</Label>
        <Input id="height" defaultValue="25px" className="col-span-2" />
      </div>
    </div>
  </PopoverContent>
</Popover>

​
API Reference

See the Radix UI Popover documentation for additional props and configuration options.

Build docs developers (and LLMs) love

Get started for freeTalk to us