Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Popover with List for React

A View Items button that opens a popover listing three items.

Framework
UI library

A View Items button that opens a short list of three rows. Use it to show a handful of related entries next to the control that counts them. In React, Base UI handles opening, dismissing and focus.

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

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. Pass the button to render on PopoverTrigger, and use PopoverContent as 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.

All 15 popover examples