Popover

Components/Overlay and disclosure

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

An independent React adapter where Ark UI provides the parts and Zag maintains state, positioning, and behavior.

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 · Ark/Zag

Running with the independent Ark UI adapter and Zag behavior.

Loading functional preview…

Open the Ark/Zag playground

Additional Content Slot · Ark/Zag

Executed by the Ark UI/Zag adapter without reusing the Web runtime or Base UI.

Loading functional preview…

Open this example in Ark/Zag

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

When to choose this output

Choose this adapter in projects that adopted Ark UI and Zag as their behavioral architecture. Do not import it into the shadcn/Base UI output.

Implementation

Status

Beta

Distribution

Source adapter

Adapter source

packages/react/src/ark/popover.jsx

import {
  Popover,
  PopoverContent,
  PopoverTitle,
  PopoverTrigger,
} from '@tis/react/ark/popover'

Workspace beta

This path is a workspace contract, not a public package. No package-manager installation is advertised yet.

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 the Ark/Zag semantics and validate Escape, outside interaction, ARIA relationships, and focus return.

Validation evidence

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

Open the stable reference