@radix-ui/react-popover

Unstyled, accessible popover primitive — the Radix building block behind shadcn/ui's Popover component.

@radix-ui/react-popover

React

Unstyled, accessible popover primitive — the Radix building block behind shadcn/ui's Popover component.

npm GitHub Docs

Fit

Bundle (gzip)

22.6 kB

64.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

A "simple" popover has to handle focus trapping, dismiss-on-outside-click and Escape, collision-aware positioning near viewport edges, and ARIA wiring for screen readers. Building that from scratch — correctly — for every project is a huge amount of undifferentiated work.

What It Does

Radix Popover ships the behavior and accessibility, none of the styling. It manages open state, focus, keyboard interactions, and smart positioning (via Floating UI) while leaving every element unstyled so you bring your own Tailwind classes. This is precisely how shadcn/ui composes its Popover, so adopting it directly gives you full control.

Installation

bash

npm install @radix-ui/react-popover

Usage Example

jsx

import * as Popover from '@radix-ui/react-popover';

export function InfoPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger className="rounded border px-3 py-1">Details</Popover.Trigger>
      <Popover.Portal>
        <Popover.Content sideOffset={8} className="rounded-md border bg-white p-4 shadow-md">
          More information here.
          <Popover.Arrow className="fill-white" />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.