Skip to content

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

Free

Popover with List for Vue

A View Items button that opens three rows, Item 1, Item 2, and Item 3, with the title Items hidden.

UI library: Ark UI

View Items opens three rows: Item 1, Item 2, and Item 3. The title Items is hidden and read by screen readers.

Use it to show a handful of related entries next to the control that counts them. A longer list belongs in a Dialog. In Vue, Ark UI does not load the rows.

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">View Items</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverTitle class="sr-only">Items</PopoverTitle>
    <ul class="flex flex-col gap-2">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </PopoverContent>
</Popover>

FAQ

How is the list marked up?

The items are the strings Item 1, Item 2, and Item 3, mapped into li elements. The list is a ul with flex flex-col gap-2. PopoverTitle reads Items and has className="sr-only".

How does View Items become the trigger?

The trigger is a Button with variant="outline" and the label View Items. Activating it opens the panel. The three strings live in an items array outside the component. Set asChild on PopoverTrigger and pass that one button. PopoverContent is the panel.

What does a row contain?

Each row is an li with text. gap-2 on the ul is the space between Item 1, Item 2, and Item 3. This file leaves the rows as text.

What names the list panel?

PopoverTitle is Items, with className="sr-only". The button says View Items. The visible content is the three list rows.

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.

How many rows does this demo render?

Three, from const items = ["Item 1", "Item 2", "Item 3"]. Each li is keyed by its string. PopoverContent has no width class, so the panel keeps w-72.

API Reference

Popover

Sets asChild. The rest is on the Popover page.

Button

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

All 15 popover examples