Anchored context that stays close to its trigger: a pill, a Soft two part panel and a nub pointing back.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/popoverPlayground
Placement
Trigger
Recipes
Side
Align
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/popover
Accessibility
- The trigger has aria-expanded and aria-controls.
- The panel is a dialog, labelled by its title.
- Focus moves into the panel and returns to the trigger on close.
Motion
- The panel grows from its nub over 180 ms on a 0.3 spring, while the trigger lifts in 120 ms.
- Closing folds back to 0.98 in 120 ms.
- A flip is a plain side swap with no motion.
- With reduced motion, it appears in place.
Responsive behavior
- Trigger padding grows and its label is 15 on Mobile.
- The panel is 320 wide on Mobile.
- Flips side and shifts along the edge, and the nub keeps pointing at the trigger.
Performance
- The panel mounts only while open. A hidden first pass measures it, so it opens on its final side with no flip.
- It sits in the browser's top layer through the popover attribute, so nothing clips it and it needs no portal.
- Resize and content changes queue one requestAnimationFrame reposition, and the listeners go when it closes.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Popover and PopoverTrigger from @/components/fetaui/popover after installing it.
- trigger takes any clickable element that accepts a ref: PopoverTrigger, Button or your own.
- Pass title, or label when there is no title, so the panel has a name. width sets the Web panel and defaults to 280.
- The Apply, Reset and Invite buttons in the demo do nothing. Wire them up and close through open and onOpenChange.
Related
TooltipComponentA short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.Hover CardComponentA preview of what sits behind a link: it loads as a skeleton of the same shape and can be pinned open.DialogComponentA window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.Morph PopoverComponentA feedback pill that grows into its own form.