Popover

Displays rich, interactive content in a portal, triggered by a click.

While tooltips are meant for small text hints on hover, Popovers are designed to hold rich HTML (like forms, grids, and settings menus) triggered by a click. This PopoverBlock solves the biggest problem with complex layouts: clipping. By utilizing React's createPortal, the popover content is rendered at the root document.body level, meaning it will never be hidden or cropped by parent layout constraints like overflow-hidden.

The same goes for the screen edge. side and align are preferences: the panel flips to the opposite side when the preferred one has no room, shifts back inside the viewport when it still overhangs, and caps its own width and height to the screen — so a w-72 panel opened side="left" next to a phone-width trigger stays fully readable instead of running off the edge. Pass avoidCollisions={false} to opt out.

Click a trigger to open its popover — you can interact with the content inside without it closing. Click outside or press Escape to dismiss.

className: on PopoverContent is where the panel width goes — any markup fits inside otherwise.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

npx shadcn@latest add @algorize-ui/popover

components/custom/blocks/PopoverBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Nothing beyond the shared setup — Popover needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Offset

sideOffset{8}: is the gap in pixels between trigger and panel.
collisionPadding{8}: is the minimum gap kept from the viewport edges while avoidCollisions is on.

Features

Discover the Popover's intelligent positioning engine that prevents collision with screen edges while displaying contextual content.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`PopoverContent`	`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	The preferred side of the trigger to render the popover content.
`PopoverContent`	`align`	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the chosen side. For example, `side="bottom" align="start"` aligns the left edge of the popover with the left edge of the trigger.
`PopoverContent`	`sideOffset`	`number`	`8`	The distance (in pixels) to render the popover away from the trigger element.
`PopoverContent`	`avoidCollisions`	`boolean`	`true`	Flips the panel to the opposite side and shifts it back into view when the preferred placement would overflow the viewport — this is what keeps `side="left" / "right"` and `align="start" / "end"` from being cropped on phones. Set to `false` to pin the panel to `side`/ `align` regardless.
`PopoverContent`	`collisionPadding`	`number`	`8`	Minimum gap (in pixels) kept between the panel and the viewport edges when `avoidCollisions` is on.
All Components	`className`	`string`	`undefined`	Standard Tailwind CSS overrides. By default, `PopoverContent` has a fixed width (`w-72`), which you can easily override here.

Account menu