Popover

Rich, interactive content in a floating panel opened from a button.

When to use

Use when: Interactive content anchored to a trigger, such as a small form or filters.
Avoid when: The content is a short label; use Tooltip. Or a list of actions; use Dropdown Menu.

Installation

bunx shelf add popover

The source lands in src/components/ui/popover.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Popover from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

<Popover.Root>
  <Popover.Trigger render={<Button variant="outline" />}>Filters</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Filters</Popover.Title>
    …
  </Popover.Content>
</Popover.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.