Popover
A small anchored surface for contextual information.
npm install https://animui.stracture.net/__local/package.tgz- Click-opened panels with interactive content, like share settings or a small filter form.
- Non-modal helpers that should stay open while people interact with the rest of the page.
- Custom pickers built from your own controls anchored to a button.
- Use tooltip for short hover labels.
- Use hover-card for read-only previews that open on hover.
- Use dialog when the choice must block the page, and dropdown-menu for a list of commands.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Popover } from 'animui/popover';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideimport { Popover, PopoverContent, PopoverTrigger } from "animui/popover";import { Button } from "animui/button"; export function ShareMenu() { return ( <Popover> <PopoverTrigger asChild><Button variant="secondary">Share</Button></PopoverTrigger> <PopoverContent> <p>Anyone with the link can view.</p> </PopoverContent> </Popover> );}API reference
4 parts. The first is the root.
Popover
Radix Popover.Root. Holds open state.
openboolean–Controlled open state.defaultOpenbooleanfalseInitial open state when uncontrolled.onOpenChange(open: boolean) => void–Called when the popover opens or closes.modalbooleanfalseTraps focus and blocks outside interaction when true.PopoverTrigger
Radix trigger that opts out of press-scale so the panel does not shift on open.
...propsComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>–Radix trigger props, including asChild and ref.PopoverContent
Portaled floating panel anchored to the trigger.
align"start" | "center" | "end""start"Alignment against the trigger.sideOffsetnumber6Gap from the trigger in px.collisionPaddingnumber10Minimum distance from viewport edges in px....propsComponentPropsWithoutRef<typeof PopoverPrimitive.Content>–Radix content props such as side, className, and onOpenAutoFocus.PopoverClose
Radix Popover.Close for an explicit dismiss button.
...propsComponentPropsWithoutRef<typeof PopoverPrimitive.Close>–Radix close props, including asChild.- EnterorSpace
- Opens the popover from the trigger.
- Escape
- Closes the popover and returns focus to the trigger.
- Radix sets aria-expanded, aria-controls, and aria-haspopup="dialog" on the trigger.
- Focus moves into the content on open and back to the trigger on close.
- Content is non-modal by default; give it a heading or aria-label when it holds controls.
- CSS transitions: the panel fades and settles from 5px toward its trigger at 0.97 scale on a spring; it leaves in 140ms.
- Transitions instead of keyframes, so a reopen mid-close reverses from where the panel is.
- Reduced motion drops the transform and keeps a short opacity fade.
- The panel is at least 12rem and at most min(22rem, 100vw minus 20px), so it never overflows a phone screen.
- Radix collision handling keeps it 10px from viewport edges by default and flips sides when needed.
- Pure CSS transitions with no motion runtime; content mounts in a portal only while open.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for click-opened, non-modal panels with interactive content. Use tooltip for short hover labels, hover-card for read-only previews, dialog when the choice must block.
- Compose Popover > PopoverTrigger asChild + PopoverContent. Pass side for placement.
The full library index for assistants is at /llms.txt.