Svelte 5 & SvelteKit

Install and configure NNUI-KIT for Svelte 5 and SvelteKit using the modern Runes architecture.

Create project

Create a new SvelteKit project using create-svelte:

Terminalbash

npm create svelte@latest my-app
cd my-app

Install NNUI-KIT

Install the package from npm:

Terminalbash

npm install nnuikit

Configure Root Layout & Tokens

Import the design token stylesheet and mount the client engine in src/routes/+layout.svelte:

src/routes/+layout.sveltesvelte

<script>
  // 1. Import NNUI design tokens (CSS variables & cascade layers)
  import 'nnuikit/tokens/theme.css';
  import { onMount } from 'svelte';

  // 2. Hydrate Light-DOM client runtime in the browser
  onMount(async () => {
    await import('nnuikit/client');
  });

  let { children } = $props();
</script>

<div data-theme="dark">
  {@render children()}
</div>

Add components using Svelte 5 Runes

Use standard HTML Light-DOM primitives with Svelte 5 $state:

src/routes/+page.sveltesvelte

<script>
  let email = $state('');
  let count = $state(0);
</script>

<main style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;">
  <div data-ui="card" style="width: 100%; max-width: 440px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h1 style="margin: 0; font-size: 1.35rem; font-weight: 700;">Svelte 5 + NNUI-KIT</h1>
      <span data-ui="badge" data-variant="primary">Runes</span>
    </div>

    <p style="margin: 0; color: var(--ui-text-secondary, #a1a1aa); font-size: 0.875rem;">
      Zero Shadow DOM traps. Native browser custom elements paired with Svelte Runes.
    </p>

    <input data-ui="input" bind:value={email} placeholder="Enter your email..." type="email" />

    <button data-ui="button" data-variant="primary" onclick={() => count++}>
      Clicked {count} times
    </button>
  </div>
</main>

Run development server

Start the SvelteKit development server:

Terminalbash

npm run dev

← All Frameworks Explore All Components →