npm

Popover

Popover shows rich content in a floating panel, anchored to the button that opens it.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/popover.

Usage

popover-demo.tsx
import {
  Popover, PopoverTrigger, PopoverContent,
} from "@viliha/vui-ui/popover";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open</Button>
      </PopoverTrigger>
      <PopoverContent>Place content for the popover here.</PopoverContent>
    </Popover>
  );
}

API Reference

PopoverContent is built on the Radix Popover primitive.

PropTypeDefault
align"start" | "center" | "end""center"
sideOffsetnumber4