Popover

A floating panel that appears next to a trigger element. Useful for contextual actions, notifications, or compact forms.

Installation

npm install @bloomkit/react

Usage

import { Popover, Button } from "@bloomkit/react";
 
<Popover trigger={<Button>Open</Button>}>
  <p>Popover content here.</p>
</Popover>

Placement

<Popover trigger={<Button>Top</Button>} side="top">
  <p>Appears above the trigger.</p>
</Popover>
 
<Popover trigger={<Button>Left</Button>} side="left" align="start">
  <p>Appears to the left, aligned to start.</p>
</Popover>

Controlled

const [open, setOpen] = useState(false);
 
<Popover trigger={<Button>Toggle</Button>} open={open} onOpenChange={setOpen}>
  <p>Controlled popover.</p>
</Popover>

Props

Prop	Type	Default	Description
trigger	ReactNode	—	The element that opens the popover
children	ReactNode	—	Popover body content
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Preferred side relative to the trigger
align	"start" \| "center" \| "end"	"center"	Alignment along the side axis
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Called when open state changes
className	string	""	Additional Tailwind classes