Components
Popover
Floating content panel anchored to a trigger element.
Popover
A floating panel that appears anchored to a trigger element, useful for settings, filters, and contextual content. Built on Base UI Popover with Motion animations.
Import
import { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup, PopoverBackdrop, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose } from '@mks2508/mks-ui/react';Basic Usage
<Popover>
<PopoverTrigger>
<Button variant="outline">Open Popover</Button>
</PopoverTrigger>
<PopoverPortal>
<PopoverPositioner sideOffset={4}>
<PopoverPopup>
<PopoverTitle>Settings</PopoverTitle>
<PopoverDescription>
Configure your preferences.
</PopoverDescription>
<PopoverClose>
<Button size="sm">Done</Button>
</PopoverClose>
</PopoverPopup>
</PopoverPositioner>
</PopoverPortal>
</Popover>Placement
The PopoverPositioner controls placement:
<PopoverPositioner side="bottom" align="center" sideOffset={8}>
<PopoverPopup>Content appears below</PopoverPopup>
</PopoverPositioner>
<PopoverPositioner side="right" align="start" sideOffset={4}>
<PopoverPopup>Content appears to the right</PopoverPopup>
</PopoverPositioner>With Arrow
<PopoverPositioner>
<PopoverPopup>
<PopoverArrow />
<p>Popover with arrow indicator</p>
</PopoverPopup>
</PopoverPositioner>API Reference
| Component | Key Props | Description |
|---|---|---|
Popover | open, defaultOpen, onOpenChange | Root provider |
PopoverTrigger | asChild | Trigger element |
PopoverPortal | — | Portal with AnimatePresence |
PopoverPositioner | side, align, sideOffset, alignOffset | Positioning wrapper |
PopoverPopup | slots | Animated content panel |
PopoverBackdrop | slots | Optional backdrop |
PopoverArrow | slots | Arrow indicator |
PopoverTitle | slots | Title text |
PopoverDescription | slots | Description text |
PopoverClose | slots | Close trigger |