Dialog

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 { bindDialog } from "@nake-ui/adapter-vanilla";

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

4. Examples

NestedDialog

Use nested dialog bindings so parent and nested layers keep independent open, focus, and dismiss lifecycles.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const parent = bindDialog(
    { trigger: parentTrigger, content: parentContent, overlay: parentOverlay, close: parentClose },
    {
      defaultOpen: false,
      modal: true,
      onOpenChange(nextOpen) {
        if (!nextOpen && child.controller.getOpen()) {
          child.controller.close();
          child.sync();
        }
      }
    }
  );

  const child = bindDialog(
    { trigger: childTrigger, content: childContent, overlay: childOverlay, close: childClose },
    {
      defaultOpen: false,
      modal: true,
      onOpenChange(nextOpen) {
        if (nextOpen && !parent.controller.getOpen()) {
          parent.controller.open();
          parent.sync();
        }
      }
    }
  );

  // cleanup on unmount
  parent.destroy();
  child.destroy();
}

parentTrigger.textContent = "Open parent dialog";
childTrigger.textContent = "Open nested dialog";

Custom Close Button

Compose a custom close button while preserving headless dialog close semantics.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDialog(
    { trigger, content, overlay, title, description, close },
    { defaultOpen: false, modal: true }
  );

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

close.textContent = "Dismiss";

No Close Button

Without a close button, dialog can still dismiss via overlay click, Escape, and outside dismiss.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDialog(
    { trigger, content, overlay, title, description },
    { defaultOpen: false, modal: true }
  );

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

trigger.textContent = "Open dialog";

Scrollable

Keep long dialog content usable with max-height and overflow scrolling on content.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDialog(
    { trigger, content, overlay, title, description, close },
    { defaultOpen: false, modal: true }
  );

  content.style.maxHeight = "12rem";
  content.style.overflow = "auto";

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

close.textContent = "Close";

5. RTL

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