Loading…

Popover

Rich floating content anchored to a trigger.

Overlays
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add popover

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Popover } from "@/components/ui/popover";

Examples

Every example the tests run, live and operable, side by side.

Default
Sides
With Arrow

API

Generated from the component's own types, so a prop cannot appear here without existing.

<PopoverContent>

Every prop of Radix UI’s Popover.Content, plus className.

<PopoverArrow>

Every prop of Radix UI’s Popover.Arrow, plus className.

Accessibility

The content has role="dialog" and therefore REQUIRES an accessible name — pass aria-label, or aria-labelledby pointing at a heading inside it. A development-only warning fires if neither is present. The trigger exposes aria-expanded and aria-controls; Escape closes and returns focus to it. Non-modal by default, so the rest of the page stays reachable; pass `modal` only when the content is a task the user must finish or abandon.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes