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/base/popover.json

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

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

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

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

Install the following dependencies:

bun add @base-ui/react

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

Copy and paste the following code into your project.

components/ui/popover.tsx

"use client";

import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
import type React from "react";
import { cn } from "@/lib/utils";

export const Popover = (props: PopoverPrimitive.Root.Props) => (
  <PopoverPrimitive.Root data-slot="popover" {...props} />
);

export const PopoverTrigger = (props: PopoverPrimitive.Trigger.Props) => (
  <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
);

export const PopoverContent = (
  props: PopoverPrimitive.Popup.Props &
    Pick<
      PopoverPrimitive.Positioner.Props,

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

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: PopoverRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<PopoverRoot.Actions | null>

children?React.ReactNode | PayloadChildRenderFunction<Payload>

defaultTriggerId?string | null

handle?PopoverHandle<Payload>

onOpenChangeComplete?(open: boolean) → void

triggerId?string | null

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"popover"

data-scope"popover"

data-part"root"

PopoverTrigger

button

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"popover-trigger"

data-scope"popover"

data-part"trigger"

PopoverPositioner

div

AttributeType

data-scope"popover"

data-part"positioner"

CSS variableType

--transform-originstring

PopoverTitle

h1

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"popover-title"

data-scope"popover"

data-part"title"

PopoverDescription

p

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"popover-description"

data-scope"popover"

data-part"description"

PopoverContent

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"popover-content"

data-scope"popover"

data-part"popup"

CSS variableType

--transform-originstring

PopoverHeader

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"popover-header"

data-scope"popover"

data-part"root"