Popover
Displays rich content in a portal, anchored to a trigger element.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/popover.jsonUsage
Use popover for non-modal content triggered by a click — filters, inline forms, or extra detail —
that should close on outside click or Escape. For a hover-triggered hint, use HoverCard instead.
<script setup lang="ts">
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
</script>
<template>
<Popover>
<PopoverTrigger as-child>
<Button variant="outline">Open popover</Button>
</PopoverTrigger>
<PopoverContent>
<p class="text-sm">Place any content here — forms, settings, or details.</p>
</PopoverContent>
</Popover>
</template>
PopoverAnchor lets you anchor the content to an element other than the trigger. Built on
reka-ui's Popover, which handles focus trapping and
collision-aware positioning.