Component

Popover

A popup content panel triggered by a button. Supports placement, controlled/uncontrolled modes, and portal rendering. Uses the headless @refraction-ui/popover core.

Examples

Click the trigger to open the popover content panel.

Installation

$pnpm add @refraction-ui/react-popover

Usage

tsx

import { Popover, PopoverTrigger, PopoverContent } from '@refraction-ui/react-popover'

export function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent>
        <p>Popover content here</p>
      </PopoverContent>
    </Popover>
  )
}

Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	--	Callback on open change.
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	--	Preferred placement side.
`children`	`ReactNode`	--	PopoverTrigger + PopoverContent.