popover
Displays rich content in a floating layer, triggered by an anchor element.
About
Popover built with @floating-ui/react and Popper-based primitives for collision-aware positioning.
Philosophy
Popovers bridge the gap between tooltips (hover, no interaction) and dialogs (heavy, blocking). They're the right choice for inline forms, color pickers, and contextual actions that need more space than a tooltip but shouldn't interrupt the user's flow. We handle positioning and collision detection so you can focus on content.
How It's Built
Installation
npx @gentleduck/cli add popover
npx @gentleduck/cli add popover
Usage
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>Place content for the popover here.</PopoverContent>
</Popover><Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>Examples
Sides
Form
Component Composition
API Reference
Popover
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | -- | Popover sub-components (PopoverTrigger, PopoverContent) |
defaultOpen | boolean | -- | Initial open state for uncontrolled usage |
open | boolean | -- | Controlled open state |
onOpenChange | (open: boolean) => void | -- | Callback when open state changes |
modal | boolean | false | Enables modal focus/interaction behavior |
dir | 'ltr' | 'rtl' | -- | Text direction. Resolved by primitives useDirection (dir prop -> DirectionProvider -> 'ltr'). |
...props | React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> | -- | Additional props inherited from Popover.Root. |
PopoverTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | -- | Use the child element as the trigger |
...props | React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> | -- | Additional props inherited from Popover.Trigger. |
PopoverContent
| Prop | Type | Default | Description |
|---|---|---|---|
forceMount | boolean | -- | Keep content mounted for animation control |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred side relative to the trigger |
align | 'start' | 'center' | 'end' | 'center' | Alignment on the chosen side |
sideOffset | number | 4 | Main-axis offset from trigger |
alignOffset | number | 0 | Cross-axis offset from trigger |
...props | React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> | -- | Additional props inherited from Popover.Content. |
PopoverClose
Element that closes the popover when interacted with.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Renders child as the close control |
children | React.ReactNode | -- | Close control content |
...props | React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close> | -- | Additional props inherited from PopoverPrimitive.Close |
PopoverAnchor
Optional custom anchor element for positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> | -- | Additional props inherited from Popover.Anchor. |
RTL Support
Set dir="rtl" on Popover for a local override, or set DirectionProvider once at app/root level for global direction. In RTL mode, side="left" and side="right" are logically swapped.
<Popover dir="rtl">
<PopoverTrigger>افتح</PopoverTrigger>
<PopoverContent>محتوى النافذة المنبثقة هنا.</PopoverContent>
</Popover><Popover dir="rtl">
<PopoverTrigger>افتح</PopoverTrigger>
<PopoverContent>محتوى النافذة المنبثقة هنا.</PopoverContent>
</Popover>