Tabs

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

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

4. Examples

Line

Set `data-variant="line"` on the tabs list for a line style.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  list.dataset.variant = "line";

  const binding = bindTabs(
    {
      list,
      tabs: { overview: tabOverview, activity: tabActivity, members: tabMembers },
      panels: { overview: panelOverview, activity: panelActivity, members: panelMembers }
    },
    [
      { id: "overview" },
      { id: "activity" },
      { id: "members" }
    ],
    {
      id: "vanilla-tabs-line-controller",
      defaultValue: "overview"
    }
  );

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

tabOverview.textContent = "Overview";

Vertical

Use `orientation="vertical"` for vertical tabs.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindTabs(
    {
      list,
      tabs: { profile: tabProfile, security: tabSecurity, billing: tabBilling },
      panels: { profile: panelProfile, security: panelSecurity, billing: panelBilling }
    },
    [
      { id: "profile" },
      { id: "security" },
      { id: "billing" }
    ],
    {
      id: "vanilla-tabs-vertical-controller",
      defaultValue: "profile",
      orientation: "vertical"
    }
  );

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

tabProfile.textContent = "Profile";

Disabled

Disabled tabs stay visible but cannot be focused or activated.

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

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindTabs(
    {
      list,
      tabs: { overview: tabOverview, audit: tabAudit, alerts: tabAlerts },
      panels: { overview: panelOverview, audit: panelAudit, alerts: panelAlerts }
    },
    [
      { id: "overview" },
      { id: "audit", disabled: true },
      { id: "alerts" }
    ],
    {
      id: "vanilla-tabs-disabled-controller",
      defaultValue: "overview"
    }
  );

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

tabAudit.textContent = "Audit Logs";
tabAudit.disabled = true;

Icons

Compose icons and labels inside tabs triggers.

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

const tabs = [
  { id: "overview", label: "Overview", icon: "OV" },
  { id: "insights", label: "Insights", icon: "IN" },
  { id: "settings", label: "Settings", icon: "ST" },
];

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindTabs(
    {
      list,
      tabs: Object.fromEntries(tabs.map((tab) => [tab.id, tabElements[tab.id]])),
      panels: Object.fromEntries(tabs.map((tab) => [tab.id, panelElements[tab.id]]))
    },
    tabs.map((tab) => ({ id: tab.id })),
    {
      id: "vanilla-tabs-icons-controller",
      defaultValue: tabs[0]?.id ?? null
    }
  );

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

5. RTL

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