Vite

Install and configure NNUI-KIT with Vite and React. Works out-of-the-box with both React 18 and React 19.

Create project

Create a new Vite project using the React TypeScript template:

Terminalbash

npm create vite@latest my-app -- --template react-ts
cd my-app

Install NNUI-KIT

Install the universal package from npm:

Terminalbash

npm install nnuikit

Clean up default Vite styles

⚠️ Important: Remove Vite's Default Root CenteringDefault Vite templates include a #root { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } rule inside src/App.css. This forces all text to be centered and adds 32px of unwanted padding.

Delete the contents of src/App.css or remove the file.

Update src/main.tsx to import the NNUI-KIT design tokens:

src/main.tsxtsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

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

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Set up your base canvas background and font in src/index.css:

src/index.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 app

Import and use components from nnuikit/react in your application:

src/App.tsxtsx

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

export default function App() {
  return (
    <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }}>
      <Card style={{ width: '100%', maxWidth: '420px', padding: '1.75rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 700 }}>Vite + NNUI-KIT</h1>
          <Badge variant="success">Active</Badge>
        </div>

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

        <Input placeholder="name@example.com" type="email" />
        
        <Button variant="primary" onClick={() => alert('Hello from NNUI-KIT!')}>
          Get Started
        </Button>
      </Card>
    </main>
  )
}

Run development server

Start the Vite local development server:

Terminalbash

npm run dev

← All Frameworks Explore All Components →