Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Popover with Heading for React

A View Details button that opens a popover with a title and a description.

Framework
UI library

A View Details button that opens a title and one line of description. It's the simplest structured popover: the title names the panel for screen readers too. 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

Which parts are the title and the description?

Both live in PopoverHeader. PopoverTitle reads Details. PopoverDescription reads Additional information about this item. The trigger label is View Details.

How does View Details become the trigger?

The trigger is a Button with variant="outline" and the label View Details. Activating it opens the panel. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

What does the description say?

PopoverDescription is the sentence Additional information about this item. It sits under PopoverTitle, which is the word Details. PopoverHeader wraps the two.

How wide is the details panel?

PopoverContent has no width class in this file, so it keeps w-72. The header is the only content: the title, then the description.

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.

What names the panel for assistive tech?

PopoverTitle is Details, and it is visible. PopoverDescription is the sentence under it. The button that opens the panel says View Details.

All 15 popover examples