Popover
Floating panel on Base UI with the kit's surface, origin-aware motion and no animation when opened from the keyboard.
On this page
A rich popover that grows out of its trigger.
Installation
Usage
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/chatcn/popover"
<Popover>
<PopoverTrigger render={<Button variant="outline">Context</Button>} />
<PopoverContent align="start" className="w-72 p-3">
<PopoverTitle>Context window</PopoverTitle>
<PopoverDescription>124,000 of 200,000 tokens used.</PopoverDescription>
</PopoverContent>
</Popover>Padding defaults to 4 px, the right inset for lists; pass className="p-3" for text. popupSurface and popupMotion are exported so other floating parts can match it exactly.
Parts
| Part | Base UI part | Notes |
|---|---|---|
Popover | Popover.Root | open, defaultOpen, onOpenChange, modal (default false) |
PopoverTrigger | Popover.Trigger | render to use your own button, openOnHover |
PopoverContent | Portal, Positioner, Popup | side (bottom), align (center), sideOffset (6), anchor, initialFocus, finalFocus |
PopoverTitle, PopoverDescription | Title, Description | Label the popup for assistive tech |
PopoverClose | Popover.Close | Closes it; render to use a Button |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Open from the trigger and focus the first control inside |
Tab | Move through the popup, then out of it |
Esc | Close and return focus to the trigger |
Motion
- 180 ms in with opacity, scale from 0.96 and 4 px toward the trigger; 140 ms out to 0.98.
- Keyboard-opened and Esc-dismissed popovers skip the transition through
data-instant. - Under reduced motion only the fade remains.