Popup

Popup is a generic floating panel positioned relative to a trigger element. Unlike DropdownMenu, it makes no assumptions about the content — the panel body is a free-form slot.

ExamplesCodeUsageChangelog

Basic

Tailwind v4

<Popup>
  <template #trigger="{ open }">
    <Button :variant="open ? 'primary' : 'secondary'">Open Popup</Button>
  </template>
  <template #content>
    <p>This is free-form popup content.</p>
  </template>
</Popup>

Placement variants

Tailwind v4

<Popup placement="bottom-start">...</Popup>
<Popup placement="bottom">...</Popup>
<Popup placement="bottom-end">...</Popup>
<Popup placement="top-start">...</Popup>
<Popup placement="top">...</Popup>
<Popup placement="top-end">...</Popup>

Padding sizes

Tailwind v4

<Popup padding="none">...</Popup>
<Popup padding="sm">...</Popup>
<Popup padding="md">...</Popup>

Props

Prop	Type	Default	Description
placement	'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top'	'bottom-start'	Position of the floating panel relative to the trigger
disabled	boolean	false	Prevents the popup from opening
padding	'none' | 'sm' | 'md'	'md'	Padding inside the floating panel

Slots

Slot	Description
trigger	The element that toggles the popup. Receives { open: boolean }
content	Free-form body of the floating panel