Popover

PaginationProgress

A floating panel of interactive content, anchored to a trigger.

Installation

pnpm add krz-ui

Usage

import { Popover, Button } from "krz-ui";
<Popover trigger={<Button variant="outline">Dimensions</Button>} aria-label="Dimensions">
  <Input label="Width" defaultValue="100%" />
</Popover>

API Reference

PropTypeDescription
triggerReactElementElement that toggles the popover, usually a Button.
childrenReactNodePanel content. Can be interactive.
open / defaultOpen / onOpenChangeboolean / (open) => voidControlled or uncontrolled state.
side"top" | "bottom" | "left" | "right"Which side to open on. Defaults to bottom.
align"start" | "center" | "end"Alignment to the trigger. Defaults to center.
className / style / ref—All go to the wrapper around the trigger. Style the floating part with classNames.content. See Customization.
classNames{ content? }Extra classes for inner parts.