docs / core / popover

Popover

a small panel you click open, anchored to whatever you clicked. the page stays live behind it, so it is for the extras you reach for on purpose: a filter set, a menu of actions, a compact form.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

small anchored panels: notifications, filters, a compact formTitle + Description inside Content give it an accessible namenot modal. anything that must block the page is a Dialognot a tooltip. plain hover labels stay Tooltip

a11y

opens on click, closes on click-outside and Escape · Title and Description wire the popup's name and descriptionjest-axe

dependencies

@base-ui/react
live demo · try it out
customize
sidepreferred side of the trigger
alignalignment along that side
sideOffsetgap from the trigger, in pixels
8
titlethe popup's accessible name
descriptionsupporting line below the title
usagecopy
import { Popover } from "@usva-ui/react/primitives/popover";

<Popover>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Notifications</Popover.Title>
    <Popover.Description>You have no new notifications.</Popover.Description>
  </Popover.Content>
</Popover>

props

proptypedefaultnotes
openboolean—controlled open state.
defaultOpenbooleanfalseinitial open state when uncontrolled.
onOpenChange(open, eventDetails) => void—fires with the new open state first.
side"top" | "right" | "bottom" | "left"—preferred side of the trigger, on Content.
align"start" | "center" | "end"—alignment along the chosen side, on Content.
sideOffsetnumber8distance in pixels from the trigger, on Content.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Popover } from "@usva-ui/react/primitives/popover";

<Popover>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content side="bottom">
    <Popover.Title>Notifications</Popover.Title>
    <Popover.Description>You have no new notifications.</Popover.Description>
  </Popover.Content>
</Popover>