Popover

1. Live Preview

vanilla live preview activates on the client; source HTML keeps a readable preview island and primitive contract.

2. Installation

Install adapter-specific dependencies first, then complete setup via the installation guide. installation docs

pnpm add @nake-ui/primitives @nake-ui/adapter-vanilla @nake-ui/theme-vanilla

3. Usage

Minimal runnable usage for the current adapter.

import "@nake-ui/theme-vanilla/styles.css";
import { bindPopover } from "@nake-ui/adapter-vanilla";

const binding = bindPopover(nodes, items, options);
binding.destroy();

4. Examples

Align

Show start / center / end cross-axis placement with aligned popover positioners.

import "@nake-ui/theme-vanilla/styles.css";
import { bindPopover } from "@nake-ui/adapter-vanilla";

const aligns = ["start", "center", "end"] as const;

for (const align of aligns) {
  const binding = bindPopover(
    { root, trigger, positioner, content, title, description },
    { id: `example-popover-${align}`, defaultOpen: false, placement: "bottom", align, matchAnchorWidth: false }
  );

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Align: start";

Custom

Render a custom profile card while preserving popover title, description, and dialog semantics.

import "@nake-ui/theme-vanilla/styles.css";
import { bindPopover } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindPopover(
    { root, trigger, positioner, content, title, description },
    { id: "example-custom-popover", defaultOpen: false, matchAnchorWidth: false }
  );

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Open profile card";

5. RTL

The same structure running inside a `dir="rtl"` container.