Overlays

Popover

A small non-modal panel attached to a trigger, for extra details or quick actions. It sits in the top layer (never clipped) and closes on outside click, Escape, or the trigger. Focus stays where the user put it; use Dialog when the panel must be dealt with first.

demos/popover.tsx

import { Button } from "pixelbits/button";
import { Input } from "pixelbits/input";
import { Popover } from "pixelbits/popover";

export default function Demo() {
  return (
    <Popover trigger={<Button>Share</Button>} title="Share link">
      <p className="mb-2.5 text-pb-muted">Anyone with the link can view.</p>
      <Input readOnly value="pb.dev/s/9x2" size="sm" aria-label="Link" />
    </Popover>
  );
}

Installation

npm: import

import { Popover } from "pixelbits/popover";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/popover.json

API

<Popover>

Example

<Popover trigger={<Button>Share</Button>} title="Share link">
  <Input readOnly value={url} />
</Popover>

Prop	Type	Default	Description
trigger*	ReactElement	—	The element that toggles the popover, usually a `Button`.
open	boolean	—	Whether it is open (controlled).
defaultOpen	boolean	false	Open on first render (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when it opens or closes.
title	ReactNode	—	Optional heading; it also names the popover for screen readers.
align	"start" \| "center" \| "end"	"start"	Horizontal alignment with the trigger.
children*	ReactNode	—	The content: text, a form, a share box…

Also accepts every prop of Omit<HTMLAttributes<HTMLDivElement>, "title">.