Skip to content

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

Free

Popover with Heading for React

A View Details button that opens the title Details and the line Additional information about this item.

View Details opens a panel titled Details, with the line Additional information about this item under it. The title names the panel for screen readers too.

Use it when a control needs a title and one line, and nothing else. A preview on hover belongs in a Hover Card. In React, Base UI does not fetch the details.

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 render={<Button variant="outline" />}>
    View Details
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Details</PopoverTitle>
      <PopoverDescription>
        Additional information about this item.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

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.

API Reference

Popover

No extra props in this demo. The rest is on the Popover page.

Button

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

All 15 popover examples