Next.js

Install and configure NNUI-KIT for Next.js 15 with App Router and React 19.

Create project

Create a new Next.js project using create-next-app:

Terminalbash

npx create-next-app@latest my-app --typescript --eslint --app --no-tailwind --src-dir
cd my-app

Install NNUI-KIT

Install the package from npm:

Terminalbash

npm install nnuikit

Configure Root Layout & Tokens

Import the design token stylesheet in src/app/layout.tsx and set your default theme:

src/app/layout.tsxtsx

import type { Metadata } from 'next'

// 1. Import NNUI design tokens (CSS variables & cascade layers)
import 'nnuikit/tokens/theme.css'

// 2. Global app styling
import './globals.css'

export const metadata: Metadata = {
  title: 'My NNUI App',
  description: 'Built with Next.js 15 and NNUI-KIT',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" data-theme="dark">
      <body>{children}</body>
    </html>
  )
}

Add clean default reset styles in src/app/globals.css:

src/app/globals.csscss

:root {
  color-scheme: dark light;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ui-bg-canvas, #09090b);
  color: var(--ui-text-primary, #fafafa);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

Add components to your page

NNUI-KIT primitives render cleanly in Server Components. For interactive event handlers, add 'use client' at the top of your page or component:

src/app/page.tsxtsx

'use client'

import { Button, Card, Input, Badge } from 'nnuikit/react'

export default function Home() {
  return (
    <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }}>
      <Card style={{ width: '100%', maxWidth: '440px', padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ margin: 0, fontSize: '1.35rem', fontWeight: 700 }}>Next.js + NNUI-KIT</h1>
          <Badge variant="primary">App Router</Badge>
        </div>

        <p style={{ margin: 0, color: 'var(--ui-text-secondary, #a1a1aa)', fontSize: '0.875rem' }}>
          Universal Light-DOM UI primitives with zero Shadow DOM accessibility traps.
        </p>

        <Input placeholder="Enter username..." />

        <Button variant="primary" onClick={() => alert('Submitted!')}>
          Launch Dashboard
        </Button>
      </Card>
    </main>
  )
}

Run development server

Start the Next.js local development server:

Terminalbash

npm run dev

← All Frameworks Explore All Components →