shadcn.io is not affiliated with official shadcn/ui

Shadcn Popover for React

Overlay with extra info or options on trigger.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/popover.json

npx shadcn@latest add https://kit.dev/r/aria/popover.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/popover.json

yarn shadcn@latest add https://kit.dev/r/aria/popover.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

Copy and paste the following code into your project.

components/ui/popover.tsx

"use client";

import type React from "react";
import {
  DialogTrigger,
  type DialogTriggerProps,
  Heading,
  Popover as PopoverPrimitive,
  type PopoverProps as PopoverPrimitiveProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";

export const PopoverTrigger = (props: DialogTriggerProps) => {
  const { children, ...rest } = props;

  return (
    <DialogTrigger data-slot="popover-trigger" {...rest}>
      {children}

Update the import paths to match your project setup.

Anatomy

PopoverArrow
└── PopoverArrowTip
PopoverAnchor
PopoverTrigger
PopoverIndicator
PopoverPositioner
PopoverContent
PopoverTitle
PopoverDescription
PopoverClose

Usage

import { Button } from "@/components/ui/button";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-64 max-w-full">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
    <FieldGroup className="min-w-0 gap-3">
      <Field className="min-w-0" orientation="horizontal">
        <FieldLabel className="w-1/2">Width</FieldLabel>
        <Input className="min-w-0" defaultValue="100%" />
      </Field>
      <Field className="min-w-0" orientation="horizontal">
        <FieldLabel className="w-1/2">Height</FieldLabel>
        <Input className="min-w-0" defaultValue="25px" />
      </Field>
    </FieldGroup>
  </PopoverContent>
</Popover>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Basic

A simple popover with a header, title, and description.

PreviewCode

Alignments

Use placement on the popover to control alignment.

PreviewCode

Form

A popover with form fields inside.

PreviewCode

Rtl

Right-to-left popover. See the RTL configuration guide for document direction.

PreviewCode

API Reference

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

arrowBoundaryOffset?number

arrowRef?RefObject<Element | null>

boundaryElement?Element

children?ChildrenOrFunction<T>

containerPadding?number

crossOffset?number

getTargetRect?(target: Element) → DOMRect | null

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isNonModal?boolean

isOpen?boolean

maxHeight?number

offset?number

onBlurWithin?(e: FocusEvent) → void

onFocusWithin?(e: FocusEvent) → void

onFocusWithinChange?(isFocusWithin: boolean) → void

scrollRef?RefObject<Element | null>

shouldCloseOnInteractOutside?(element: Element) → boolean

shouldFlip?boolean

shouldSkipAnimation?boolean

shouldUpdatePosition?boolean

slot?string | null

style?StyleOrFunction<T>

trigger?string

triggerRef?RefObject<Element | null>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"popover-content"

data-scope"popover"

data-part"root"

CSS variableType

--trigger-anchor-pointstring

PopoverTrigger

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

arrowBoundaryOffset?number

arrowRef?RefObject<Element | null>

boundaryElement?Element

children?ChildrenOrFunction<T>

containerPadding?number

crossOffset?number

getTargetRect?(target: Element) → DOMRect | null

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isNonModal?boolean

isOpen?boolean

maxHeight?number

offset?number

onBlurWithin?(e: FocusEvent) → void

onFocusWithin?(e: FocusEvent) → void

onFocusWithinChange?(isFocusWithin: boolean) → void

scrollRef?RefObject<Element | null>

shouldCloseOnInteractOutside?(element: Element) → boolean

shouldFlip?boolean

shouldSkipAnimation?boolean

shouldUpdatePosition?boolean

slot?string | null

style?StyleOrFunction<T>

trigger?string

triggerRef?RefObject<Element | null>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?ClassNameOrFunction<PopoverRenderProps>

AttributeType

data-slot"popover-trigger"

data-scope"popover"

data-part"root"

PopoverHeader

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

arrowBoundaryOffset?number

arrowRef?RefObject<Element | null>

boundaryElement?Element

children?ChildrenOrFunction<T>

containerPadding?number

crossOffset?number

getTargetRect?(target: Element) → DOMRect | null

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isNonModal?boolean

isOpen?boolean

maxHeight?number

offset?number

onBlurWithin?(e: FocusEvent) → void

onFocusWithin?(e: FocusEvent) → void

onFocusWithinChange?(isFocusWithin: boolean) → void

scrollRef?RefObject<Element | null>

shouldCloseOnInteractOutside?(element: Element) → boolean

shouldFlip?boolean

shouldSkipAnimation?boolean

shouldUpdatePosition?boolean

slot?string | null

style?StyleOrFunction<T>

trigger?string

triggerRef?RefObject<Element | null>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"popover-header"

data-scope"popover"

data-part"root"

PopoverTitle

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

arrowBoundaryOffset?number

arrowRef?RefObject<Element | null>

boundaryElement?Element

children?ChildrenOrFunction<T>

containerPadding?number

crossOffset?number

getTargetRect?(target: Element) → DOMRect | null

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isNonModal?boolean

isOpen?boolean

maxHeight?number

offset?number

onBlurWithin?(e: FocusEvent) → void

onFocusWithin?(e: FocusEvent) → void

onFocusWithinChange?(isFocusWithin: boolean) → void

scrollRef?RefObject<Element | null>

shouldCloseOnInteractOutside?(element: Element) → boolean

shouldFlip?boolean

shouldSkipAnimation?boolean

shouldUpdatePosition?boolean

slot?string | null

style?StyleOrFunction<T>

trigger?string

triggerRef?RefObject<Element | null>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"popover-title"

data-scope"popover"

data-part"root"

PopoverDescription

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

arrowBoundaryOffset?number

arrowRef?RefObject<Element | null>

boundaryElement?Element

children?ChildrenOrFunction<T>

containerPadding?number

crossOffset?number

getTargetRect?(target: Element) → DOMRect | null

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isNonModal?boolean

isOpen?boolean

maxHeight?number

offset?number

onBlurWithin?(e: FocusEvent) → void

onFocusWithin?(e: FocusEvent) → void

onFocusWithinChange?(isFocusWithin: boolean) → void

scrollRef?RefObject<Element | null>

shouldCloseOnInteractOutside?(element: Element) → boolean

shouldFlip?boolean

shouldSkipAnimation?boolean

shouldUpdatePosition?boolean

slot?string | null

style?StyleOrFunction<T>

trigger?string

triggerRef?RefObject<Element | null>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"popover-description"

data-scope"popover"

data-part"root"