Astro
Install and configure NNUI-KIT for Astro. Because NNUI-KIT primitives are 100% Light-DOM, they render cleanly at build time with zero client JavaScript by default.
1
Create project
Create a new Astro project using create astro:
Terminalbash
npm create astro@latest my-app
cd my-app2
Install NNUI-KIT
Install the package from npm:
Terminalbash
npm install nnuikit3
Configure Root Layout & Tokens
Import the design token stylesheet in your base Astro layout:
src/layouts/Layout.astroastro
---
// 1. Import NNUI design tokens (CSS variables & cascade layers)
import 'nnuikit/tokens/theme.css';
---
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>NNUI Astro App</title>
</head>
<body>
<slot />
<!-- Optional: Load client micro-enhancers for interactive Tier 2 components -->
<script>
import 'nnuikit/client';
</script>
</body>
</html>4
Add components to your page
In Astro, you can use semantic Light-DOM attributes directly with zero JavaScript overhead:
src/pages/index.astroastro
---
import Layout from '../layouts/Layout.astro';
---
<Layout>
<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;">Astro + NNUI-KIT</h1>
<span data-ui="badge" data-variant="primary">Zero JS</span>
</div>
<p style="margin: 0; color: var(--ui-text-secondary, #a1a1aa); font-size: 0.875rem;">
Pure HTML Light-DOM primitives rendered at build time with CSS Cascade Layers.
</p>
<input data-ui="input" placeholder="Enter your email..." type="email" />
<button data-ui="button" data-variant="primary">
Get Started
</button>
</div>
</main>
</Layout>5
Run development server
Start the Astro local development server:
Terminalbash
npm run dev