Popover

A panel that opens beside its trigger and holds anything: a few lines of text, a small form. It grows out of the trigger and folds back faster.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/popover

Examples

A few lines beside the trigger

popover-basic.tsx

import { Button } from "@/components/zero/button";import {  Popover,  PopoverContent,  PopoverDescription,  PopoverTitle,  PopoverTrigger,} from "@/components/zero/popover";export default function PopoverBasic() {  return (    <Popover>      <PopoverTrigger render={<Button variant="secondary" />}>        About the reward      </PopoverTrigger>      <PopoverContent>        <PopoverTitle>3,100 credits</PopoverTitle>        <PopoverDescription>          Paid when the crate is signed for at the north gate. Half if it          arrives late.        </PopoverDescription>      </PopoverContent>    </Popover>  );}

Behaviour

It opens on click and closes on a click outside or Escape; focus moves into it. Use a Tooltip for a label, a Popover for anything you might read twice or act in.

Props

PopoverContent

Prop	Type	Default	Description
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Where it opens from the trigger.
align	"start" \| "center" \| "end"	"center"	How it lines up with the trigger.

Also takes every prop of Base UI's Popover.Popup.

PopoverTitle, PopoverDescription, PopoverClose

Also takes every prop of Base UI's Popover.Title.