popover

Popover

A small panel that opens from a trigger and stays until dismissed, with a title and description, such as delivery details or a size guide.

States: Default

Parts

Part	File	Does
Popover	Popover.vue	Groups all parts of the popover.
PopoverAnchor	PopoverAnchor.vue	Sets the element the popover content is positioned against.
PopoverContent	PopoverContent.vue	Holds what the popover shows while open.
PopoverDescription	PopoverDescription.vue	Explains the popover in a short text below its title.
PopoverHeader	PopoverHeader.vue	Groups the title and description at the top of the popover.
PopoverTitle	PopoverTitle.vue	Names what the popover is about.
PopoverTrigger	PopoverTrigger.vue	Opens and closes the popover.

Anatomy

<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle />
      <PopoverDescription />
    </PopoverHeader>
  </PopoverContent>
</Popover>

Styling

Part	Recipe
PopoverContent	popover-content
PopoverDescription	popover-description
PopoverHeader	popover-header
PopoverTitle	popover-title

Install

Writes 8 files into components/ui/popover/. For agents, npx @frontic/ui docs popover prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; reka-ui

API reference

Popover Popover.vue

Groups all parts of the popover.

Prop	Type	Default
defaultOpen	boolean	false

open	boolean	—

modal	boolean	false

Event	Payload
update:open	value: boolean

Slot	Slot props
default	{ open: boolean; close: () => void; }

Parts

Anatomy

Styling

Install

API reference

Popover Popover.vue

PopoverAnchor PopoverAnchor.vue

PopoverContent PopoverContent.vue

PopoverDescription PopoverDescription.vue

PopoverHeader PopoverHeader.vue

PopoverTitle PopoverTitle.vue

PopoverTrigger PopoverTrigger.vue