Popover

PreviousNext

A popup component that displays content in a floating panel.

Component popover-basic not found in registry.

Component popover-close-button not found in registry.

Component popover-with-icon not found in registry.

Component popover-no-arrow not found in registry.

Component popover-positions not found in registry.

Installation

pnpm dlx shadcn@latest add popover

Usage

import * as Button from "@/registry/radix-ui/ui/button"
import * as Popover from "@/registry/radix-ui/ui/popover"
 
export function PopoverExample() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button.Root>Open Popover</Button.Root>
      </Popover.Trigger>
      <Popover.Content>
        <div className="space-y-2">
          <h4 className="font-medium">Popover Title</h4>
          <p className="text-muted-foreground text-sm">
            This is the popover content.
          </p>
        </div>
      </Popover.Content>
    </Popover.Root>
  )
}

Features

  • Accessible: Built on Radix UI primitives with full keyboard navigation and screen reader support
  • Customizable: Flexible styling with Tailwind CSS variants
  • Animated: Smooth enter/exit animations
  • Positioning: Smart positioning with collision detection
  • Arrow Support: Optional arrow pointing to trigger element

Variants

Basic Popover

A simple popover with content.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Open Popover</Button.Root>
  </Popover.Trigger>
  <Popover.Content>
    <div className="space-y-2">
      <h4 className="font-medium">Basic Popover</h4>
      <p className="text-muted-foreground text-sm">
        This is a basic popover example.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>

Popover with Close Button

A popover with a close button.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>With Close Button</Button.Root>
  </Popover.Trigger>
  <Popover.Content>
    <div className="space-y-2">
      <h4 className="font-medium">Popover with Close</h4>
      <p className="text-muted-foreground text-sm">
        This popover has a close button.
      </p>
    </div>
    <Popover.Close asChild>
      <Button.Root variant="ghost" size="sm" className="h-6 w-6 p-0">
        ×
      </Button.Root>
    </Popover.Close>
  </Popover.Content>
</Popover.Root>

Popover without Arrow

A popover without the pointing arrow.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>No Arrow</Button.Root>
  </Popover.Trigger>
  <Popover.Content showArrow={false}>
    <div className="space-y-2">
      <h4 className="font-medium">No Arrow</h4>
      <p className="text-muted-foreground text-sm">
        This popover doesn't have an arrow.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>

Positions

Basic Positions

Popovers can be positioned on different sides of the trigger element.

// Top position
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Top</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="top">
    <div className="space-y-2">
      <h4 className="font-medium">Top Position</h4>
      <p className="text-muted-foreground text-sm">
        This popover appears above the trigger.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>
 
// Bottom position
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Bottom</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="bottom">
    <div className="space-y-2">
      <h4 className="font-medium">Bottom Position</h4>
      <p className="text-muted-foreground text-sm">
        This popover appears below the trigger.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>
 
// Left position
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Left</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="left">
    <div className="space-y-2">
      <h4 className="font-medium">Left Position</h4>
      <p className="text-muted-foreground text-sm">
        This popover appears to the left of the trigger.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>
 
// Right position
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Right</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="right">
    <div className="space-y-2">
      <h4 className="font-medium">Right Position</h4>
      <p className="text-muted-foreground text-sm">
        This popover appears to the right of the trigger.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>

Alignment Options

You can also control the alignment of the popover relative to the trigger.

// Start alignment
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Top Start</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="top" align="start">
    <div className="space-y-2">
      <h4 className="font-medium">Top Start</h4>
      <p className="text-muted-foreground text-sm">
        Aligned to the start of the trigger.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>
 
// End alignment
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Top End</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="top" align="end">
    <div className="space-y-2">
      <h4 className="font-medium">Top End</h4>
      <p className="text-muted-foreground text-sm">
        Aligned to the end of the trigger.
      </p>
    </div>
  </Popover.Content>
</Popover.Root>
 
// Center alignment (default)
<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Top Center</Button.Root>
  </Popover.Trigger>
  <Popover.Content side="top" align="center">
    <div className="space-y-2">
      <h4 className="font-medium">Top Center</h4>
      <p className="text-muted-foreground text-sm">
        Centered on the trigger (default).
      </p>
    </div>
  </Popover.Content>
</Popover.Root>

Examples

Settings Menu

function SettingsPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button.Root variant="outline">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </Button.Root>
      </Popover.Trigger>
      <Popover.Content>
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            <h4 className="font-medium">Settings</h4>
          </div>
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-sm">
              <User className="h-3 w-3" />
              <span>Profile Settings</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Calendar className="h-3 w-3" />
              <span>Calendar Settings</span>
            </div>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  )
}

Form Popover

function FormPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button.Root variant="outline">Quick Add</Button.Root>
      </Popover.Trigger>
      <Popover.Content>
        <div className="space-y-4">
          <h4 className="font-medium">Quick Add Item</h4>
          <div className="space-y-2">
            <input
              type="text"
              placeholder="Item name"
              className="border-input bg-background w-full rounded-md border px-3 py-2 text-sm"
            />
            <textarea
              placeholder="Description"
              className="border-input bg-background w-full rounded-md border px-3 py-2 text-sm"
              rows={3}
            />
          </div>
          <div className="flex justify-end gap-2">
            <Button.Root variant="outline" size="sm">
              Cancel
            </Button.Root>
            <Button.Root size="sm">Add Item</Button.Root>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  )
}