Popover

Displays rich content in a portal, triggered by a button. Built for React applications with Next.js integration and TypeScript support.

Ever notice how some of the best interfaces have these neat little panels that pop up right where you need them? Click a settings button and boom - there's your form right there. That's what popovers do best.

Clean way to show forms and controls without taking over the screen:

Loading component...

import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"import {  Popover,  PopoverContent,  PopoverTrigger,} from "@/components/ui/popover"export default function PopoverDemo() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <Popover>        <PopoverTrigger asChild>          <Button variant="outline">Open popover</Button>        </PopoverTrigger>        <PopoverContent className="w-80">          <div className="grid gap-4">            <div className="space-y-2">              <h4 className="leading-none font-medium">Dimensions</h4>              <p className="text-muted-foreground text-sm">                Set the dimensions for the layer.              </p>            </div>            <div className="grid gap-2">              <div className="grid grid-cols-3 items-center gap-4">                <Label htmlFor="width">Width</Label>                <Input                  id="width"                  defaultValue="100%"                  className="col-span-2 h-8"                />              </div>              <div className="grid grid-cols-3 items-center gap-4">                <Label htmlFor="maxWidth">Max. width</Label>                <Input                  id="maxWidth"                  defaultValue="300px"                  className="col-span-2 h-8"                />              </div>              <div className="grid grid-cols-3 items-center gap-4">                <Label htmlFor="height">Height</Label>                <Input                  id="height"                  defaultValue="25px"                  className="col-span-2 h-8"                />              </div>              <div className="grid grid-cols-3 items-center gap-4">                <Label htmlFor="maxHeight">Max. height</Label>                <Input                  id="maxHeight"                  defaultValue="none"                  className="col-span-2 h-8"                />              </div>            </div>          </div>        </PopoverContent>      </Popover>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Built on Radix UI with all the smart positioning and keyboard stuff handled for you. It's one of those components that just works - figures out where to place itself, handles focus, plays nice with screen readers.

npx shadcn@latest add popover

When popovers make sense

You know that awkward spot between "this needs more than a tooltip" and "this doesn't need a whole dialog"? That's popover territory.

Keep things contextual - Info shows up right where it belongs
Save screen space - Hide secondary stuff until it's needed
Smart about placement - Won't get cut off by viewport edges
Handles focus properly - Keyboard navigation that actually works
Renders in portals - No more z-index headaches
Works with everything - Click, hover, focus, whatever you need

Date picker

Because nobody wants to type dates manually:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Quick access to user stuff without a full dropdown:

Loading component...

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import {  Popover,  PopoverContent,  PopoverTrigger,} from "@/components/ui/popover"import { Separator } from "@/components/ui/separator"import { LogOut, Settings, User } from "lucide-react"export default function PopoverProfile() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <Popover>        <PopoverTrigger asChild>          <Button variant="ghost" className="relative h-8 w-8 rounded-full">            <Avatar className="h-8 w-8">              <AvatarImage src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face" alt="@shadcn" />              <AvatarFallback>SC</AvatarFallback>            </Avatar>          </Button>        </PopoverTrigger>        <PopoverContent className="w-56" align="end">          <div className="flex items-center space-x-2 p-2">            <Avatar className="h-8 w-8">              <AvatarImage src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face" alt="@shadcn" />              <AvatarFallback>SC</AvatarFallback>            </Avatar>            <div className="space-y-1">              <h4 className="text-sm font-semibold">@shadcn</h4>              <p className="text-xs text-muted-foreground">                [email protected]              </p>            </div>          </div>          <Separator className="my-2" />          <div className="grid gap-1">            <Button variant="ghost" className="w-full justify-start" size="sm">              <User className="mr-2 h-4 w-4" />              Profile            </Button>            <Button variant="ghost" className="w-full justify-start" size="sm">              <Settings className="mr-2 h-4 w-4" />              Settings            </Button>            <Separator className="my-1" />            <Button variant="ghost" className="w-full justify-start" size="sm">              <LogOut className="mr-2 h-4 w-4" />              Log out            </Button>          </div>        </PopoverContent>      </Popover>    </div>  )}

These are the patterns you see everywhere because they work. Date pickers that don't suck, profile menus that feel snappy, settings panels that don't interrupt your flow.

Great for React apps

Works especially well in dashboards, admin panels, and anywhere you've got forms or controls that users need occasionally. The kind of stuff where a full page or modal would be overkill.

Drops right into Next.js projects. TypeScript definitions included. Plays nice with the shadcn ecosystem.

Built on solid foundations

Uses Radix UI under the hood, so you get all the good stuff without having to think about it:

Collision detection - Bumps away from screen edges automatically
Focus management - Tab navigation just works
Portal rendering - No weird clipping issues
Smooth animations - CSS variables for transitions that feel right
Flexible anchoring - Stick it to whatever element makes sense
Modal or not - Your choice on how it behaves
Smart dismissal - Click outside, press escape, whatever feels natural

API Reference

The root container that manages popover state and provides context.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Default open state for uncontrolled usage
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`modal`	`boolean`	`false`	Whether popover should be modal

PopoverTrigger

The button that toggles the popover. By default, content positions against this element.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`asChild`	`boolean`	`false`	Pass functionality to child element
`children`	`React.ReactNode`	-	Trigger content

Data attributes:

[data-state]: "open" | "closed"

PopoverContent

The panel that appears when the popover is open. Renders in a portal by default.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side of trigger
`sideOffset`	`number`	`4`	Distance from trigger
`alignOffset`	`number`	`0`	Offset from aligned position
`avoidCollisions`	`boolean`	`true`	Whether to avoid viewport collisions
`collisionPadding`	`number`	`10`	Padding from viewport edges
`arrowPadding`	`number`	`0`	Padding between arrow and content edges
`sticky`	`"partial" \| "always"`	`"partial"`	Sticky behavior when scrolling
`hideWhenDetached`	`boolean`	`false`	Hide when trigger becomes fully occluded

Data attributes:

[data-state]: "open" | "closed"
[data-side]: "left" | "right" | "bottom" | "top"
[data-align]: "start" | "end" | "center"

CSS variables:

--radix-popover-content-transform-origin: Transform origin for animations
--radix-popover-content-available-width: Available width in viewport
--radix-popover-content-available-height: Available height in viewport
--radix-popover-trigger-width: Width of the trigger element
--radix-popover-trigger-height: Height of the trigger element

PopoverAnchor

Optional element to position content against instead of the trigger.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`asChild`	`boolean`	`false`	Pass functionality to child element

Event Handlers

The PopoverContent component supports several event handlers for fine-grained control:

Handler	Type	Description
`onOpenAutoFocus`	`(event: Event) => void`	Called when focus moves to content on open
`onCloseAutoFocus`	`(event: Event) => void`	Called when focus returns to trigger on close
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	Called when Escape key is pressed
`onPointerDownOutside`	`(event: PointerEvent) => void`	Called when pointer is pressed outside
`onFocusOutside`	`(event: FocusEvent) => void`	Called when focus moves outside
`onInteractOutside`	`(event: Event) => void`	Called when interaction happens outside

Key	Action
`Space`	Opens/closes the popover
`Enter`	Opens/closes the popover
`Tab`	Moves focus to next focusable element
`Shift + Tab`	Moves focus to previous focusable element
`Escape`	Closes popover and returns focus to trigger

Positioning Patterns

Pattern	Use Case	Configuration
Bottom aligned	Dropdown menus	`side="bottom" align="start"`
Top tooltip style	Help text	`side="top" align="center"`
Side panels	Context menus	`side="right" align="start"`
Corner dialogs	User profiles	`side="bottom" align="end"`

Make them feel right

Few things to keep in mind so your popovers don't annoy people:

Don't cram everything in - Just the stuff that matters for what they're doing
Pick good spots - Usually bottom or right, but let collision detection do its thing
Test with real content - Make sure long text doesn't break your layout
Mobile matters - Fat fingers need bigger targets
Keyboard users exist - Tab through it, make sure it makes sense
Match the trigger - Click for settings, hover for previews, whatever feels obvious
Close when done - Don't make people hunt for the X button
Make it obvious - People should know what's clickable

Settings panel in a popover

When popovers make sense

Useful popover patterns

Date picker

Profile menu

Great for React apps

Built on solid foundations

API Reference

Popover

PopoverTrigger

PopoverContent

PopoverAnchor

Event Handlers

Keyboard Navigation

Positioning Patterns

Make them feel right

On this page

Popover

Reactbutton

Reactinput

Reactlabel

Reactpopover

Reactbutton

Reactcalendar

Reactpopover

Reactavatar

Reactbutton

Reactpopover

Reactseparator

On this page