Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Popover with Footer for Vue

An Open button that shows the title Title, the line Content goes here, and Cancel and Confirm, which both close the panel.

UI library: Ark UI

Open shows a title that reads Title and the line Content goes here. Cancel and Confirm sit at the end of the panel. Both close it.

Use it for a quick confirm tied to one control. A decision that cannot be undone belongs in an Alert Dialog. In Vue, Ark UI does not perform the confirm.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
  <PopoverTrigger :asChild="true">
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Content goes here.</PopoverDescription>
    </PopoverHeader>
    <div class="flex justify-end gap-2">
      <PopoverClose :asChild="true">
        <Button size="sm" variant="outline">Cancel</Button>
      </PopoverClose>
      <PopoverClose :asChild="true"><Button size="sm">Confirm</Button></PopoverClose>
    </div>
  </PopoverContent>
</Popover>

FAQ

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

API Reference

Popover

Sets asChild. The rest is on the Popover page.

Button

Sets variant="outline" and size="sm". The rest is on the Button page.

All 15 popover examples