Primitives

Popover

A panel anchored to a trigger, for content you work in: a calendar, a filter, a list of notifications. A Tooltip only shows text and a Dropdown is a menu of actions. It stands on the same surface as the rest of the overlay family. Focus moves in on open and back to the trigger on Esc.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add popover

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

popover.tsx

tsx

import { Popover, PopoverContent, PopoverTrigger } from "@/components/entrepta/popover"

<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary">filters</Button>
  </PopoverTrigger>
  {/* a dialog to screen readers: name it when it has no heading */}
  <PopoverContent aria-label="Filters" className="w-72">
    …
  </PopoverContent>
</Popover>

Props

Prop	Type	Default	Description
open / onOpenChange	boolean / (open: boolean) => void	-	Controlled state. Leave both out and it manages itself
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Where it opens. It flips when there is no room (PopoverContent)
align	"start" \| "center" \| "end"	"start"	Alignment against the trigger (PopoverContent)
modal	boolean	false	Traps focus and blocks the page behind it