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 — Ark UI
popover.tsx
12345678910111213141516171819202122232425import { Popover } from "#components/ui/ark-ui/popover.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // size resolves once on Root; parts inherit it via context. The // positioner portals to <body> above the page. <Popover.Root size="md"> <Popover.Trigger asChild> <Button variant="surface">Share settings</Button> </Popover.Trigger> <Popover.Positioner> <Popover.Content> <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.Content> </Popover.Positioner> </Popover.Root> );}