Installation

Get nnuikit running in a new or existing Svelte project in under five minutes.

Prerequisites

Svelte 5+ (runes support)

SvelteKit — recommended for routing and SSR

Tailwind CSS v4

TypeScript — recommended

Setup

Create a new SvelteKit project

Use the official Svelte CLI to scaffold a new project.

npx sv create my-app

When prompted, select:

— Template SvelteKit minimal

— TypeScript Yes, using TypeScript syntax

— Add-ons — select tailwindcss

— Package manager — your choice (npm, pnpm, yarn, bun)

Navigate into your project

cd my-app

Initialize nnuikit

This creates your config file, installs dependencies, and writes the full base design token file directly to your project.

npx nnuikit init

Creates

nnuikit.json — project config

Injects design tokens (base palette, semantic layer, dark mode, themes) directly into your CSS file

Customize your brand color optional

Open the Theme Builder, pick your brand color or upload your logo, then copy the generated tokens and paste them at the bottom of src/routes/layout.css.

/* Paste at the bottom of src/routes/layout.css */
:root {
  --color-brand-25:  #fdfcfe;
  --color-brand-700: #6e56cf;
  --color-brand-800: #644fc1;
  /* ... all 12 steps from the Theme Builder */
}

Add a component

Copies component source into src/lib/components/ui/button/ and adds its token import to your CSS.

npx nnuikit add button

Use the component

<script lang="ts">
  import { Button } from '$lib/components/ui/button';
</script>

<Button variant="primary" size="default">Click me</Button>

CLI Reference

Command	Description
npx nnuikit init	Initialize config, write base tokens, install deps
npx nnuikit add [component]	Add a specific component to your project
npx nnuikit add --all	Add all available components at once
npx nnuikit list	List all available components

Project Structure

After running init and adding a few components, your src/lib/ directory will look like this:

src/
├── routes/
│   └── layout.css               # Base design tokens injected here by init
├── lib/
│   ├── components/
│   └── ui/
│       ├── button/
│       │   ├── button.svelte    # Component source — yours to edit
│       │   ├── tokens.css       # Component-level design tokens
│       │   └── index.ts         # Re-exports
│       └── checkbox/
│           ├── checkbox.svelte
│           ├── tokens.css
│           └── index.ts
│
└── utils/
    └── tailwindUtil.ts          # cn() utility and shared types

Using with AI Tools

Important: This project uses a custom Tailwind spacing scale where p-4 = 4px (not 16px). AI assistants like Cursor, Copilot, and ChatGPT will assume default Tailwind sizes.

The project includes a CLAUDE.md file that AI tools read automatically. If your AI generates wrong spacing, remind it: "This project uses custom spacing — p-4 = 4px, p-16 = 16px."