Browse components
Popover
Anchored popover on the native Popover API: top-layer, light dismiss and Escape for free, smart flipping, an arrow and a spring scale-in from the trigger.
Installation
npx shadcn@latest add @glint-ui/popoverFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/popover.json
Usage
import { Popover } from "@/components/ui/popover";
<Popover>
<PopoverTrigger>Share</PopoverTrigger>
<PopoverContent side="bottom" align="center">
...
<PopoverClose>Done</PopoverClose>
</PopoverContent>
</Popover>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "bottom" | "top" | "right" | "left" | "bottom" | Preferred side (flips when there is no room). |
| align | "center" | "start" | "end" | "center" | Alignment along the trigger. |
| sideOffset | number | 10 | Gap to the trigger in px. |
| arrow | boolean | true | Arrow pointing at the trigger. |
| open | ReactNode | — | Popover root: controlled open state (with onOpenChange), or defaultOpen. |
| children | ReactNode | — | Popover > PopoverTrigger + PopoverContent (+ PopoverClose). |
| className | string | — | Extra classes for the root element. |