All components
Popover
Anchored panels with header, body, and footer slots in four padding sizes.
Sizes
xs
sm
md
lg
Install
zsh — popover
1bunx stylexblocks add popoverUsage — Base UI
popover.tsx
123456789101112131415161718192021222324252627import { Popover } from "#components/ui/base-ui/popover.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example() { return ( // size resolves once on Root; parts inherit it via context. Portal → // Positioner → Popup is Base UI's real overlay chain. <Popover.Root size="md"> <Popover.Trigger render={<Button variant="surface" />}> Share settings </Popover.Trigger> <Popover.Portal> <Popover.Positioner sideOffset={8}> <Popover.Popup> <Popover.Title>Share this block</Popover.Title> <Popover.Description> Anyone with the link can view this block. </Popover.Description> <Popover.Footer> <Button variant="solid" size="sm">Copy link</Button> </Popover.Footer> </Popover.Popup> </Popover.Positioner> </Popover.Portal> </Popover.Root> );}