Quick Start (Vanilla)

Choose the adapter that matches the host runtime. All adapters share the same behavioral contract, but each one exposes lifecycle and state in the way that feels natural for that framework.

Use one adapter per rendered primitive instance. Avoid mixing framework wrappers around the same DOM nodes unless you own the lifecycle boundary and cleanup order.

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

The vanilla adapter has no framework peer dependency. It binds real DOM nodes and returns a lifecycle handle.

Write stable HTML first:

<div data-demo="tabs">
  <div data-slot="list" aria-label="Project sections"></div>
  <button data-demo-tab="overview" type="button">Overview</button>
  <button data-demo-tab="activity" type="button">Activity</button>
  <section id="panel-overview">Release readiness.</section>
  <section id="panel-activity">Recent activity.</section>
</div>

Then bind it:

import { bindTabs } from "@nake-ui/adapter-vanilla";

const list = document.querySelector<HTMLElement>("[data-slot='list']");
const overview = document.querySelector<HTMLElement>("[data-demo-tab='overview']");
const activity = document.querySelector<HTMLElement>("[data-demo-tab='activity']");
const overviewPanel = document.querySelector<HTMLElement>("#panel-overview");
const activityPanel = document.querySelector<HTMLElement>("#panel-activity");

if (list && overview && activity && overviewPanel && activityPanel) {
  const binding = bindTabs(
    {
      list,
      tabs: { overview, activity },
      panels: { overview: overviewPanel, activity: activityPanel }
    },
    [{ id: "overview" }, { id: "activity" }],
    { id: "project-tabs", defaultValue: "overview", activationMode: "manual" }
  );

  window.addEventListener("beforeunload", () => binding.destroy(), { once: true });
}

After binding:

• The list has data-ui="tabs", role="tablist", and data-orientation.
• Each tab has role="tab", aria-selected, aria-controls, and roving tabIndex.
• Each panel has role="tabpanel", aria-labelledby, data-state, and hidden when inactive.
• destroy() can run more than once without leaving duplicate listeners.

Optional starter skin:

pnpm add @nake-ui/theme-vanilla

import "@nake-ui/theme-vanilla/styles.css";

You can also write plain CSS against public attributes. The vanilla adapter does not own layout or visual classes.

Ask agents to generate both:

1. Markup with stable selectors and IDs.
2. Binding code with bind*, registrations, sync() when needed, and destroy() cleanup.

The cleanup path is part of the vanilla contract.

Vanilla is the best adapter for progressive enhancement and custom framework integration. The host must own mount, update, and unmount timing. Floating primitives measure on the client and need valid anchor/content nodes before positioning sync.

• Installation (Vanilla)
• Adapter Integration (Vanilla)
• Primitive Concepts
• Components Overview
• Troubleshooting