JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaijs/core@latest/tabs/yai-tabs.css">

<div
    data-yai-tabs
    data-theme="minimal"
    data-behavior="slide-left"
    data-ref-path="app">

    <!-- Global header (shares event listeners) -->
    <header data-tabs-header>
        <h1><a href="#app=home&section=1">My App</a></h1>
    </header>

    <!-- Main navigation -->
    <nav data-controller>
        <button data-tab-action="open" data-open="home" data-default>Home</button>
        <button data-tab-action="open" data-open="about">About</button>
        <button data-tab-action="open" data-open="settings">Settings</button>
    </nav>

    <!-- Main content (each tab is a "page") -->
    <div data-content>
        <!-- Home page -->
        <div data-tab="home">
            <h2>Welcome</h2>
            <p>Build complete SPAs with YaiTabs.</p>

            <!-- Nested tabs inherit parent's event listeners -->
            <div data-yai-tabs-lazy data-theme="minimal" data-ref-path="section">
                <nav data-controller>
                    <button data-tab-action="open" data-open="1" data-default>Section A</button>
                    <button data-tab-action="open" data-open="2">Section B</button>
                </nav>
                <div data-content>
                    <div data-tab="1">
                        <p>Content A with multiple lines.</p>
                        <p class="ymb-0">This ensures proper content height.</p>
                    </div>
                    <div data-tab="2">
                        <p>Content B with multiple lines.</p>
                        <p class="ymb-0">This ensures proper content height.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- About page -->
        <div data-tab="about">
            <h2>About</h2>
            <p>This page demonstrates event hub capabilities.</p>
            <button...

JavaScript

import { YaiTabs } from 'https://cdn.jsdelivr.net/npm/@yaijs/core@latest/dist/yai-bundle.js';

const tabs = new YaiTabs({
    events: {
        enableStats: true,
        setListener: {
            '[data-yai-tabs]': ['click', 'input', 'submit'],
            'window': [{ type: 'hashchange', debounce: 60 }],
        }
    }
});

// Handle all events via hooks
tabs
    .hook('eventClick', ({ action }) => {
        if (action === 'scrollToTop') window.scrollTo({ top: 0, behavior: 'smooth' });
        if (action === 'showMetrics') console.log('Metrics:', tabs.events.getStats());
    })
    .hook('eventInput', ({ event, target, action }) => {
        if (action === 'validateUsername') {
            console.log('Validating:', target.value);
        }
    })
    .hook('eventSubmit', ({ event, action }) => {
        if (action === 'saveSettings') {
            event.preventDefault();
            console.log('Settings saved');
        }
    });