# Popover

A floating panel anchored to a trigger, built on Radix Popover, with header, title, and description primitives plus configurable side, alignment, offset, and collision handling.

- Category: Overlays & Navigation
- License: MIT
- Page: https://www.saasuji.com/components/popover
- Install: npx shadcn@latest add https://www.saasuji.com/r/popover.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open (Popover) | `boolean` | — | Controlled open state of the popover. |
| defaultOpen (Popover) | `boolean` | `false` | Open state on first render for an uncontrolled popover. |
| onOpenChange (Popover) | `(open: boolean) => void` | — | Called when the open state changes. |
| modal (Popover) | `boolean` | `false` | Traps focus and disables outside pointer events while the popover is open. |
| side (PopoverContent) | `"top" | "right" | "bottom" | "left"` | `"bottom"` | Preferred side of the trigger the content is placed against. |
| align (PopoverContent) | `"start" | "center" | "end"` | `"center"` | Alignment of the content along the trigger edge. |
| sideOffset (PopoverContent) | `number` | `4` | Distance in pixels between the trigger and the content. |
| alignOffset (PopoverContent) | `number` | `0` | Pixel offset applied along the alignment axis. |
| avoidCollisions (PopoverContent) | `boolean` | `true` | Shifts and flips the content to stay inside the viewport. |
| forceMount (PopoverContent) | `true` | — | Keeps the content mounted for animation libraries instead of unmounting when closed. |
| asChild (PopoverTrigger, PopoverAnchor) | `boolean` | `false` | Renders the trigger or anchor as its child element instead of the default button or div. |
| className (PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription) | `string` | — | Additional classes merged onto the part that receives it. |
| children (all parts) | `React.ReactNode` | — | Trigger label and the header, title, description, and body content inside PopoverContent. |
| ...props (Popover) | `React.ComponentProps<typeof PopoverPrimitive.Root>` | — | All remaining Radix Popover root props are forwarded. |
| ...props (PopoverTrigger, PopoverAnchor) | `React.ComponentProps<typeof PopoverPrimitive.Trigger> | React.ComponentProps<typeof PopoverPrimitive.Anchor>` | — | All remaining Radix trigger and anchor props are forwarded to the rendered elements. |
| ...props (PopoverContent) | `React.ComponentProps<typeof PopoverPrimitive.Content>` | — | All remaining Radix content props are forwarded (trapFocus, onOpenAutoFocus, collisionBoundary, …). |
| ...props (PopoverHeader, PopoverTitle, PopoverDescription) | `React.ComponentProps<"div"> | React.ComponentProps<"h2"> | React.ComponentProps<"p">` | — | All remaining native attributes are forwarded to the rendered header, title, and description elements. |

## Source

```tsx
"use client"

import * as React from "react"
import { Popover as PopoverPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="popover-header"
      className={cn("flex flex-col gap-1 text-sm", className)}
      {...props}
    />
  )
}

function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
  return (
    <div
      data-slot="popover-title"
      className={cn("font-medium", className)}
      {...props}
    />
  )
}

function PopoverDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="popover-description"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

export {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverAnchor,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
}

```