Popover
A small anchored surface for contextual information.
pnpm dlx shadcn@latest add @uiarc/popoverLive · keyboard ready
- 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
Add Popover with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/popoverAdds the component and its local dependencies, and installs @radix-ui/react-popover. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Popover, PopoverContent, PopoverTrigger } from "@/registry/components/popover/popover";import { Button } from "@/registry/components/button/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.
PropTypeDefaultDescription
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.
PropTypeDefaultDescription
...propsComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>–Radix trigger props, including asChild and ref.PopoverContent
Portaled floating panel anchored to the trigger.
PropTypeDefaultDescription
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.
PropTypeDefaultDescription
...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.