Popover

A positioned popup built on Base UI’s Popover primitive. Includes built-in Floating UI positioning, an optional arrow, and scale/fade enter/exit transitions.

Import


import { Popover } from "chunks-ui";

Basic Usage


<Popover.Root>
  <Popover.Trigger>More info</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Details</Popover.Title>
    <Popover.Description>
      This is additional context about the feature.
    </Popover.Description>
  </Popover.Content>
</Popover.Root>

With Arrow


<Popover.Root>
  <Popover.Trigger>Help</Popover.Trigger>
  <Popover.Content>
    <Popover.Arrow />
    <Popover.Title>Need help?</Popover.Title>
    <Popover.Description>
      Contact support at help@example.com.
    </Popover.Description>
  </Popover.Content>
</Popover.Root>

With Close Button


<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content>
    <div className="flex items-center justify-between">
      <Popover.Title>Settings</Popover.Title>
      <Popover.Close>Close</Popover.Close>
    </div>
    <Popover.Description>
      Configure your preferences here.
    </Popover.Description>
  </Popover.Content>
</Popover.Root>

Positioning

The Popover.Content uses Base UI’s built-in Floating UI integration. It has a default sideOffset of 8px. You can customize placement via side and align props:


<Popover.Content side="bottom" align="start">
  ...
</Popover.Content>

Compound Parts

Part	Description
`Popover.Root`	State container. Manages open/close.
`Popover.Trigger`	Element that toggles the popover.
`Popover.Content`	Portal + positioner + popup panel. Default `sideOffset={8}`. Accepts `side`, `align`, `alignOffset` props.
`Popover.Arrow`	SVG arrow pointing to the trigger. Filled with `--popover` color.
`Popover.Title`	Popover heading. Semibold `text-sm`.
`Popover.Description`	Supporting text. `text-muted-foreground`.
`Popover.Close`	Button that closes the popover.

Popover.Root Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes

Popover.Content Props

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side
`sideOffset`	`number`	`8`	Distance from the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the side
`alignOffset`	`number`	`0`	Offset from the alignment edge
`className`	`string`	—	Additional CSS classes