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

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

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

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

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

Install the following dependencies:

bun add radix-ui

npm install radix-ui

pnpm add radix-ui

yarn add radix-ui

Copy and paste the following code into your project.

components/ui/popover.tsx

"use client";

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

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

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

export const PopoverAnchor = (
  props: React.ComponentProps<typeof PopoverPrimitive.Anchor>
) => <PopoverPrimitive.Anchor data-slot="popover-anchor" {...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) → void

children?React.ReactNode

modal?boolean

asChild?boolean

AttributeType

data-slot"popover"

data-scope"popover"

data-part"root"

PopoverAnchor

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

modal?boolean

asChild?boolean

AttributeType

data-slot"popover-anchor"

data-scope"popover"

data-part"anchor"

PopoverTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

modal?boolean

asChild?boolean

AttributeType

data-slot"popover-trigger"

data-scope"popover"

data-part"trigger"

PopoverContent

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

forceMount?true

modal?boolean

onCloseAutoFocus?FocusScopeProps["onUnmountAutoFocus"]

onOpenAutoFocus?FocusScopeProps["onMountAutoFocus"]

asChild?boolean

className?string

AttributeType

data-slot"popover-content"

data-scope"popover"

data-part"content"

aria-describedbystring

aria-labelledbystring

data-expanded?string

data-placementstring

data-sidestring

data-state"open" | "closed"

role"dialog"

CSS variableType

--radix-popover-content-transform-originstring

PopoverHeader

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"popover-header"

data-scope"popover"

data-part"root"

PopoverTitle

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"popover-title"

data-scope"popover"

data-part"root"

PopoverDescription

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"popover-description"

data-scope"popover"

data-part"root"