Components/Stepper / Wizard

Stepper / Wizard

Tier 2: Light-DOM

Multi-step workflow progress indicator and panel synchronizer in Light-DOM

Installation

$npx nnui add stepper

copy

Interactive Preview & Code

<!-- Universal Light-DOM Stepper Wizard with Cross-Tab Sync -->
<ui-stepper id="agent-wizard" active-step="1" persist="local" sync="cross-tab">
  <!-- Step Header Bar with Connecting Tracks -->
  <ol data-part="steplist">
    <li data-part="step" data-step="1">
      <div data-part="indicator">1</div>
      <div data-part="content">
        <div data-part="title">Model &amp; Persona</div>
        <div data-part="description">LLM backbone</div>
      </div>
    </li>
    <li data-part="step" data-step="2">
      <div data-part="indicator">2</div>
      <div data-part="content">
        <div data-part="title">Tools &amp; MCP</div>
        <div data-part="description">Capabilities</div>
      </div>
    </li>
    <li data-part="step" data-step="3">
      <div data-part="indicator">3</div>
      <div data-part="content">
        <div data-part="title">Safety &amp; Limits</div>
        <div data-part="description">Budget caps</div>
      </div>
    </li>
    <li data-part="step" data-step="4">
      <div data-part="indicator">4</div>
      <div data-part="content">
        <div data-part="title">Launch Pipeline</div>
        <div data-part="description">Deploy cluster</div>
      </div>
    </li>
  </ol>

  <!-- Synchronized Content Panels -->
  <div data-part="panel" data-step="1">
    <h4>Configure AI Model</h4>
    <p>Select LLM engine and prompt directives.</p>
    <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
  </div>

  <div data-part="panel" data-step="2">
    <h4>Configure Capabilities</h4>
    <p>Toggle sandbox permissions and tools.</p>
    <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
  </div>

  <div data-part="panel" data-step="3">
    <h4>Safety &amp; Token Budget</h4>
    <p>Define token limits and human checkpoints.</p>
    <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
  </div>

  <div data-part="panel" data-step="4">
    <h4>Verify &amp; Launch</h4>
    <p>Cluster initialized and live.</p>
  </div>
</ui-stepper>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function StepperwizardDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <!-- Universal Light-DOM Stepper Wizard with Cross-Tab Sync -->
    <ui-stepper id="agent-wizard" active-step="1" persist="local" sync="cross-tab">
      <!-- Step Header Bar with Connecting Tracks -->
      <ol data-part="steplist">
        <li data-part="step" data-step="1">
          <div data-part="indicator">1</div>
          <div data-part="content">
            <div data-part="title">Model & Persona</div>
            <div data-part="description">LLM backbone</div>
          </div>
        </li>
        <li data-part="step" data-step="2">
          <div data-part="indicator">2</div>
          <div data-part="content">
            <div data-part="title">Tools & MCP</div>
            <div data-part="description">Capabilities</div>
          </div>
        </li>
        <li data-part="step" data-step="3">
          <div data-part="indicator">3</div>
          <div data-part="content">
            <div data-part="title">Safety & Limits</div>
            <div data-part="description">Budget caps</div>
          </div>
        </li>
        <li data-part="step" data-step="4">
          <div data-part="indicator">4</div>
          <div data-part="content">
            <div data-part="title">Launch Pipeline</div>
            <div data-part="description">Deploy cluster</div>
          </div>
        </li>
      </ol>

      <!-- Synchronized Content Panels -->
      <div data-part="panel" data-step="1">
        <h4>Configure AI Model</h4>
        <p>Select LLM engine and prompt directives.</p>
        <button type="button" className="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
      </div>

      <div data-part="panel" data-step="2">
        <h4>Configure Capabilities</h4>
        <p>Toggle sandbox permissions and tools.</p>
        <button type="button" className="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
      </div>

      <div data-part="panel" data-step="3">
        <h4>Safety & Token Budget</h4>
        <p>Define token limits and human checkpoints.</p>
        <button type="button" className="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
      </div>

      <div data-part="panel" data-step="4">
        <h4>Verify & Launch</h4>
        <p>Cluster initialized and live.</p>
      </div>
    </ui-stepper>
  );
}

<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements

const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');

const handleSelect = (val) => {
  console.log('Selected:', val);
};
</script>

<template>
  <!-- Universal Light-DOM Stepper Wizard with Cross-Tab Sync -->
  <ui-stepper id="agent-wizard" active-step="1" persist="local" sync="cross-tab">
    <!-- Step Header Bar with Connecting Tracks -->
    <ol data-part="steplist">
      <li data-part="step" data-step="1">
        <div data-part="indicator">1</div>
        <div data-part="content">
          <div data-part="title">Model & Persona</div>
          <div data-part="description">LLM backbone</div>
        </div>
      </li>
      <li data-part="step" data-step="2">
        <div data-part="indicator">2</div>
        <div data-part="content">
          <div data-part="title">Tools & MCP</div>
          <div data-part="description">Capabilities</div>
        </div>
      </li>
      <li data-part="step" data-step="3">
        <div data-part="indicator">3</div>
        <div data-part="content">
          <div data-part="title">Safety & Limits</div>
          <div data-part="description">Budget caps</div>
        </div>
      </li>
      <li data-part="step" data-step="4">
        <div data-part="indicator">4</div>
        <div data-part="content">
          <div data-part="title">Launch Pipeline</div>
          <div data-part="description">Deploy cluster</div>
        </div>
      </li>
    </ol>

    <!-- Synchronized Content Panels -->
    <div data-part="panel" data-step="1">
      <h4>Configure AI Model</h4>
      <p>Select LLM engine and prompt directives.</p>
      <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
    </div>

    <div data-part="panel" data-step="2">
      <h4>Configure Capabilities</h4>
      <p>Toggle sandbox permissions and tools.</p>
      <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
    </div>

    <div data-part="panel" data-step="3">
      <h4>Safety & Token Budget</h4>
      <p>Define token limits and human checkpoints.</p>
      <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
    </div>

    <div data-part="panel" data-step="4">
      <h4>Verify & Launch</h4>
      <p>Cluster initialized and live.</p>
    </div>
  </ui-stepper>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<!-- Universal Light-DOM Stepper Wizard with Cross-Tab Sync -->
<ui-stepper id="agent-wizard" active-step="1" persist="local" sync="cross-tab">
  <!-- Step Header Bar with Connecting Tracks -->
  <ol data-part="steplist">
    <li data-part="step" data-step="1">
      <div data-part="indicator">1</div>
      <div data-part="content">
        <div data-part="title">Model & Persona</div>
        <div data-part="description">LLM backbone</div>
      </div>
    </li>
    <li data-part="step" data-step="2">
      <div data-part="indicator">2</div>
      <div data-part="content">
        <div data-part="title">Tools & MCP</div>
        <div data-part="description">Capabilities</div>
      </div>
    </li>
    <li data-part="step" data-step="3">
      <div data-part="indicator">3</div>
      <div data-part="content">
        <div data-part="title">Safety & Limits</div>
        <div data-part="description">Budget caps</div>
      </div>
    </li>
    <li data-part="step" data-step="4">
      <div data-part="indicator">4</div>
      <div data-part="content">
        <div data-part="title">Launch Pipeline</div>
        <div data-part="description">Deploy cluster</div>
      </div>
    </li>
  </ol>

  <!-- Synchronized Content Panels -->
  <div data-part="panel" data-step="1">
    <h4>Configure AI Model</h4>
    <p>Select LLM engine and prompt directives.</p>
    <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
  </div>

  <div data-part="panel" data-step="2">
    <h4>Configure Capabilities</h4>
    <p>Toggle sandbox permissions and tools.</p>
    <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
  </div>

  <div data-part="panel" data-step="3">
    <h4>Safety & Token Budget</h4>
    <p>Define token limits and human checkpoints.</p>
    <button type="button" class="ui-button" onclick="document.getElementById('agent-wizard').next()">Next Step →</button>
  </div>

  <div data-part="panel" data-step="4">
    <h4>Verify & Launch</h4>
    <p>Cluster initialized and live.</p>
  </div>
</ui-stepper>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { StepperWizard } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-stepper> and <nnui-stepper> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.