Popover

Overlays

A small floating surface anchored to a trigger.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Button, Input, Popover } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Popover trigger={<Button>Open</Button>} title="Title">
  Content
</Popover>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
trigger	ReactElement	—	Element that opens the popover.
title	ReactNode	—	Optional title.
description	ReactNode	—	Optional supporting text.
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Preferred placement.
align	"start" \| "center" \| "end"	"center"	Alignment along the trigger.