Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Simple Text Popover for React

A button that opens a popover with a single line of text.

Framework
UI library

An Open button that shows one sentence in a panel, with a visually hidden title to name it. Use it for a note that should stay up until it's dismissed, which a tooltip won't do. 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

What is in this panel?

PopoverTitle reads Details and has className="sr-only", so the name is for assistive tech. The visible line is a p: This is a simple popover with text content. The trigger label is Open.

How does the Open button become the trigger?

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

When should this be a tooltip?

This panel is one sentence that stays open until it is dismissed. A Tooltip fits a few words on hover or focus. The sr-only title gives this panel a name.

How wide is the panel?

This demo sets no width on PopoverContent, so it keeps the part's w-72. The title is visually hidden, and the paragraph is the only text someone sees.

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.

Why is the title visually hidden?

PopoverTitle with className="sr-only" names the panel Details without a visible heading. The sentence people read is the p under it. The Open button is the visible control.

All 15 popover examples