Popover

Anatomy

import { Popover } from "chroma-panel";

Below 640px it becomes a bottom sheet. Pass sheetOnMobile={false} for an anchored popover at every width.

Prop	Type	Default	Description
anchor*	HTMLElement \| null	—	The element to position against. Pass `null` while the trigger has not mounted.
open*	boolean	—	Whether the surface is shown.
onClose*	() => void	—	Fires on Escape, on an outside click, and on the sheet being dismissed. You own the open state, so this is where you close it.
offset	number	8	Gap in pixels between the anchor and the surface.
sheetOnMobile	boolean	true	Below 640px, render as a bottom sheet with a grab handle and a scrim. Turn off for an anchored popover at every width.
className	string	—	Class on the surface.
children*	React.ReactNode	—	What the surface contains.