Popover

Components/Overlay and disclosure

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Displays concise contextual content in a non-modal layer anchored to a trigger.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Anatomy

Open popover 1 6

2

Popover title

3

Concise contextual content.

4

Cancel Confirm 5

1. Trigger — Button controlling open state and aria-expanded.
2. Panel — elevated surface with role="dialog".
3. Header — optional title and absolutely positioned close control.
4. Body — independent Content Text and Content Slot.
5. Actions — up to two independently replaceable and hideable Buttons.
6. Arrow — closed Shape pointing to the trigger.

Interactive example · React · shadcn/Base UI

Running with the React source recipe distributed through shadcn and based on Base UI.

Loading functional preview…

Open the React · shadcn/Base UI playground

Additional Content Slot · React · shadcn/Base UI

Executed by the React recipe distributed through shadcn and based on Base UI.

Loading functional preview…

Open this example in React · shadcn/Base UI

Placements

Modifier	Panel position
ds-popover--bottom	Below the trigger
ds-popover--top	Above the trigger
ds-popover--left	To the trigger's left
ds-popover--right	To the trigger's right

Token mapping

Part	Component tokens
Panel	component.popover.panel.{bg,border-color,border-width,gap,max-width,padding-x,padding-y,radius,shadow}.default
Title / Body	component.popover.title.color.default, component.popover.body.{color,gap,padding-bottom}.default
Close	component.popover.close.{size,icon-size,padding,color}.default, component.popover.close.icon.stroke-width.default
Content Slot	component.popover.content-slot.gap.default
Actions	component.popover.actions.{gap,padding-top}.default
Arrow	component.popover.arrow.{base,fill}.default

Usage

When to use

Use Popover when

Contextual content needs actions, links, a simple field, or richer guidance than a Tooltip without blocking the rest of the page.

Do not use Popover when

Content is only a short label (use Tooltip), requires a blocking decision or long flow (use Modal), or represents a command list (use Menu).

Related

Tooltip Menu Modal Button

React composition

import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Button } from "@/components/ui/button"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Detalhes</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader><PopoverTitle>Detalhes da ação</PopoverTitle></PopoverHeader>
    <PopoverClose label="Fechar popover" />
    <PopoverDescription>Conteúdo breve associado ao trigger.</PopoverDescription>
  </PopoverContent>
</Popover>

Implementation

Status

Beta

Distribution

Source via shadcn

Installation

Configure the namespace once in the React integration guide.

npm

npx shadcn@latest add @tis/popover @tis/button

pnpm

pnpm dlx shadcn@latest add @tis/popover @tis/button

yarn

yarn dlx shadcn@latest add @tis/popover @tis/button

bun

bunx --bun shadcn@latest add @tis/popover @tis/button

Public contract

Registry item

@tis/popover

Provider

Base UI

Distribution

Source copied into the application

Status

Beta

Technical architecture

Open registry JSON

Inspect distributed source

Accessibility

Accessibility and keyboard

Input	Behavior
Enter / Space	The Button trigger opens or closes through native click behavior.
Escape	Closes the Popover and returns focus to the trigger.
Tab	Follows natural order; there is no focus trap.
role="dialog"	Use aria-labelledby for a visible title or aria-label when there is no header.

Output responsibility

Preserve Base UI semantics and test real content, focus visibility, and accessible names in the consuming application.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference