Popover
@/components/kamod-ui/popover
Installation
Import Popover, PopoverTrigger, PopoverContent and optional sub-components from `@/components/kamod-ui/popover`.
pnpm add @kamod-ch/uiUsage
Use PopoverTrigger with asChild when the trigger is a Button so you avoid nested buttons. Use popovers for secondary actions, inline forms, and contextual help; keep content focused and close on outside click.
import { Popover } from "@/components/kamod-ui/popover";<Popover />Basic
A simple popover with title and description, triggered by a button.
With Form
Embed a compact settings form inside the popover. This mirrors the classic shadcn/ui dimensions example.
Placement
Control which side the popover appears on using the side prop.
Align
Use the align prop on PopoverContent to control alignment along the cross axis (mirrors shadcn/ui).
With Form (compact)
Narrow popover with horizontal label and field rows, matching the newer shadcn/ui dimensions example layout.
With Close Button
Use PopoverClose to add an explicit dismiss control inside the content.
Default Open
Render the popover in its open state by default.
Settings Panel
A rich settings popover combining switches and fields for inline configuration.
API Reference
Props, slots and variants for this component.
Popover
Popover component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| defaultOpen | boolean | false |
| PopoverTrigger asChild | boolean | false — merge trigger props into the child element (e.g. Button) instead of wrapping a button |
| PopoverTrigger | interactive opener | required |
| PopoverContent side | "top" | "right" | "bottom" | "left" | "bottom" |
| PopoverContent align | "start" | "center" | "end" | "center" |
| PopoverContent sideOffset | number | 4 |
| PopoverContent forceMount | boolean | false |
| PopoverClose | dismiss button | renders X icon |
Accessibility Notes
Popover content receives role="dialog" and is linked to its trigger via aria-controls. Pressing Escape closes the popover and returns focus to the trigger. Ensure trigger labels are descriptive; avoid placing critical information only inside popovers.