Installation (Vanilla)

nake-ui separates behavior from framework ergonomics:

• @nake-ui/core: low-level state, IDs, focus scope, dismissable layer, collection, roving focus, typeahead, portal, presence, selection, and positioning utilities.
• @nake-ui/primitives: framework-agnostic primitive controllers for canonical v1 primitives.
• @nake-ui/adapter-*: framework-specific bindings over the same primitive contracts.
• @nake-ui/schemas: machine-readable primitive metadata for validators, catalogs, and repair tooling.
• @nake-ui/theme-*: optional starter styling. Theme packages are not required for behavior.

Install an adapter package through its public package entry only. Do not import src/*, dist/*, or private internal files from application code.

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

Optional starter skin:

pnpm add @nake-ui/theme-vanilla

The vanilla adapter has no framework peer dependency. It depends on @nake-ui/core and @nake-ui/primitives.

The packages are authored in TypeScript and publish declaration files from the package root. TypeScript projects should import named exports from package entry points:

import { Tabs } from "@nake-ui/adapter-react";
import { bindTabs } from "@nake-ui/adapter-vanilla";
import { primitiveSchemas } from "@nake-ui/schemas";

If your app uses path aliases, keep them pointed at package roots. Aliasing directly into workspace source can bypass the same public boundary your users will consume.

Behavior does not require CSS. Add a theme package only when you want the starter visual skin used by docs examples:

pnpm add @nake-ui/theme-react
pnpm add @nake-ui/theme-vue
pnpm add @nake-ui/theme-vanilla
pnpm add @nake-ui/theme-solid
pnpm add @nake-ui/theme-svelte

The theme packages are examples of styling against the public DOM contract. They are not required for a11y, state, or keyboard behavior.

After installation:

1. Import one primitive from the adapter package.
2. Render it with stable IDs or deterministic default IDs.
3. Inspect data-ui, data-slot, data-state, and ARIA linkage.
4. Run your app typecheck.
5. Add an interaction test for the first primitive you ship.

Repository-level checks:

pnpm typecheck
pnpm content:check
pnpm test:contracts

• Installing an adapter without its peer framework.
• Mixing different versions of @nake-ui/primitives and @nake-ui/adapter-*.
• Importing private source paths in application code.
• Assuming optional theme packages are required for behavior.
• Styling from class names only and never checking ARIA or data-* state.

import {
  bindCombobox,
  bindDialog,
  bindDisclosure,
  bindListbox,
  bindMenu,
  bindPopover,
  bindSelect,
  bindTabs,
  bindTooltip,
  connectDisclosure
} from "@nake-ui/adapter-vanilla";

Every bind* API returns a handle with controller, sync, and destroy where supported by the binding.

Vanilla host code owns:

• Querying stable elements.
• Building registrations from domain data.
• Calling sync() after external state or DOM changes when required.
• Calling destroy() when the view unmounts.

Do not bind the same nodes twice without destroying the previous binding.

• Elements are queried by stable selectors.
• Registrations use stable IDs.
• Binding handle is stored.
• destroy() runs during teardown.
• ARIA and data-* output is inspected after binding.