The UI Kit engineered for
the modern platform.

<!-- 100% Platform-Native Light-DOM Syntax (Zero React/Virtual DOM needed) -->
<ui-ai-prompt-box persist="local" placeholder="Ask AI assistant...">
  <textarea data-part="input"></textarea>
  <div data-part="toolbar">
    <button data-part="submit-btn" class="ui-button">Send</button>
  </div>
</ui-ai-prompt-box>

<ui-stepper current-step="2" linear persist="url" sync="cross-tab">
  <div data-part="step-list">
    <div data-part="step" data-step="1">Build</div>
    <div data-part="step" data-step="2">Deploy</div>
    <div data-part="step" data-step="3">Verify</div>
  </div>
</ui-stepper>

<ui-segmented-control value="admin">
  <button data-part="segment" data-value="viewer">Viewer</button>
  <button data-part="segment" data-value="admin">Admin</button>
  <button data-part="segment" data-value="owner">Owner</button>
</ui-segmented-control>

// React 18 & 19 First-Class Wrapper (nnui-kit/react)
import 'nnui-kit/css';
import 'nnui-kit/client';
import { Stepper, SegmentedControl, AiPromptBox, toast } from 'nnui-kit/react';

export function Dashboard() {
  const [role, setRole] = useState('admin');

  return (
    <div className="space-y-4">
      <SegmentedControl value={role} onChange={(e) => setRole(e.detail.value)} />
      <AiPromptBox persist="local" onSubmit={(e) => toast.success('Prompt sent')} />
      <Stepper current-step={2} persist="url" sync="cross-tab" />
    </div>
  );
}

<!-- Svelte 5 (Runes) Integration -->
<script>
  import 'nnui-kit/css';
  import 'nnui-kit/client';
  let role = $state('admin');
</script>

<ui-segmented-control value={role} onchange={(e) => role = e.detail.value}>
  <button data-part="segment" data-value="viewer">Viewer</button>
  <button data-part="segment" data-value="admin">Admin</button>
  <button data-part="segment" data-value="owner">Owner</button>
</ui-segmented-control>

<!-- Vue 3 (Composition API) -->
<script setup>
import { ref } from 'vue';
import 'nnui-kit/css';
import 'nnui-kit/client';

const role = ref('admin');
</script>

<template>
  <ui-segmented-control :value="role" @change="(e) => role = e.detail.value">
    <button data-part="segment" data-value="viewer">Viewer</button>
    <button data-part="segment" data-value="admin">Admin</button>
    <button data-part="segment" data-value="owner">Owner</button>
  </ui-segmented-control>
</template>