Skip to content

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

Free

Popover with List for Ark UI

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

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 React, Ark UI does not load the rows.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">View Items</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverTitle className="sr-only">Items</PopoverTitle>
    <ul className="flex flex-col gap-2">
      {items.map((item) => (
        <li 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