Popover

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/popover.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/popover.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/popover.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/popover.json
    

Usage

      Copy
      <script setup lang="ts">
import { Popover } from "@/components/ui/popover";
</script>

<template>
  <Popover.Root>
    <!-- … -->
  </Popover.Root>
</template>
    

Composition

      Copy
      Popover.Root
├── Popover.Anchor
├── Popover.ArrowTip
├── Popover.Arrow
├── Popover.CloseTrigger
├── Popover.Content
├── Popover.Context
├── Popover.Description
├── Popover.Indicator
├── Popover.RootProvider
├── Popover.Title
├── Popover.Trigger
    

Examples

Controlled

Use the open and onOpenChange props to control the open state of the popover.

Root Provider

An alternative way to control the popover is to use the RootProvider component and the usePopover hook. This way you can access the state and methods from outside the component.

Arrow

Use Popover.Arrow and Popover.ArrowTip to render an arrow pointing to the trigger.

Placement

To change the placement of the popover, set the positioning prop.

Close Behavior

The popover is designed to close on blur and when the esc key is pressed.

• To prevent it from closing on blur (clicking or focusing outside), pass the closeOnInteractOutside prop and set it to false.
• To prevent it from closing when the esc key is pressed, pass the closeOnEsc prop and set it to false.

Modality

In some cases, you might want the popover to be modal. This means that it'll trap focus within its content, block scrolling on the body, disable pointer interactions outside the popover, and hide content behind the popover from screen readers.

Anchor

Use Popover.Anchor to position the popover relative to a different element than the trigger.

Same Width

Use positioning.sameWidth to make the popover match the width of its trigger element.

Dialog Integration

When rendering a popover inside a dialog, use lazyMount and unmountOnExit on the popover root so it is properly unmounted when the dialog closes.

Nested

Popovers can be nested within each other. Each nested popover maintains its own open state and positioning.

Multiple Triggers

Share a single popover across multiple trigger elements. Pass a value to each Popover.Trigger — the popover repositions to whichever trigger is activated without closing.

API

See Ark UI Popover docs for full props and examples.