Manual / CDN

Add NNUI-KIT to any project without Node.js, npm, or a JavaScript build step. Perfect for vanilla HTML, HTMX, Django, Ruby on Rails, Laravel, Go, and PHP.

Add CDN tags to <head>

Include the design token stylesheet and the lightweight client engine from the unpkg CDN:

index.htmlhtml

<!-- 1. NNUI Design Tokens & CSS Cascade Layers -->
<link rel="stylesheet" href="https://unpkg.com/nnuikit/dist/theme.css">

<!-- 2. Light-DOM Behavioral Client (Sub-40 KB) -->
<script type="module" src="https://unpkg.com/nnuikit/dist/client.js"></script>

Use Tier 0 Semantic Primitives

Add data-ui attributes to any standard HTML elements. They render immediately without waiting for JavaScript:

index.htmlhtml

<!-- Button Primitives -->
<button data-ui="button" data-variant="primary">Primary Action</button>
<button data-ui="button" data-variant="secondary">Secondary Action</button>
<button data-ui="button" data-variant="outline">Outline Action</button>

<!-- Input & Form Controls -->
<input data-ui="input" type="text" placeholder="Your name..." />

<!-- Badge & Status -->
<span data-ui="badge" data-variant="success">Active</span>

<!-- Container Card -->
<div data-ui="card" style="padding: 1.5rem; max-width: 400px;">
  <h3 style="margin-top: 0;">Instant Card</h3>
  <p style="color: var(--ui-text-secondary);">Zero JavaScript required.</p>
</div>

Use Tier 2 Micro-Enhancers

Use custom elements like <ui-dialog>, <ui-tabs>, or <ui-dropdown> directly in HTML with declarative state persistence:

index.htmlhtml

<!-- Declarative Tabs with URL persistence -->
<ui-tabs value="overview" persist="url">
  <div data-part="tablist">
    <button data-part="tab" data-value="overview">Overview</button>
    <button data-part="tab" data-value="billing">Billing</button>
    <button data-part="tab" data-value="settings">Settings</button>
  </div>
  <div data-part="panel" data-value="overview">Overview content here...</div>
  <div data-part="panel" data-value="billing">Billing content here...</div>
  <div data-part="panel" data-value="settings">Settings content here...</div>
</ui-tabs>

Complete Standalone HTML Template

Copy and paste this complete boilerplate into an index.html file and open it directly in any browser:

index.htmlhtml

<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NNUI-KIT Standalone Page</title>
    <link rel="stylesheet" href="https://unpkg.com/nnuikit/dist/theme.css">
    <script type="module" src="https://unpkg.com/nnuikit/dist/client.js"></script>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        background: var(--ui-bg-canvas, #09090b);
        color: var(--ui-text-primary, #fafafa);
        font-family: system-ui, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <div data-ui="card" style="width: 100%; maxWidth: 440px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
      <h2 style="margin: 0;">Manual HTML Setup</h2>
      <p style="color: var(--ui-text-secondary); margin: 0;">No build tool required.</p>
      <input data-ui="input" placeholder="Enter text..." />
      <button data-ui="button" data-variant="primary">Submit</button>
    </div>
  </body>
</html>

← All Frameworks Explore All Components →