Open Source

Beautiful components for Svelte 5

Design-token-powered UI library. Copy components into your project, own the code, customize everything.

npx nnuikit init
23 Components
3 Token Layers
5 Color Themes
100% Accessible

Why nnuikit?

Not another wrapper library. A different approach entirely.

Copy & Own

Components are copied into your project. You own the code — customize anything without constraints.

3-Layer Design Tokens

Base palette → Semantic tokens → Component tokens. Change one variable, the entire system updates.

Accessible by Default

Built on Bits UI primitives — keyboard navigation, ARIA, focus management, and screen reader support come standard.

Svelte 5 + Tailwind v4

Built with runes, $props(), $bindable(). Styled with Tailwind CSS v4 and @theme for custom utilities.

CLI Powered

npx nnuikit init → npx nnuikit add button. Dependencies install automatically. Tokens inject into your CSS.

Theme Switching

5 color themes built in. Add class="violet" and every component changes. Blue, cyan, orange, pink, violet.

23 Components & growing

Each component ships with its own design tokens. From forms to overlays, everything you need.

Get started in seconds

1

Initialize your project

npx nnuikit init
2

Add components

npx nnuikit add button checkbox input switch
3

Use in your app

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

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

Start building today

No lock-in. No breaking updates. Your code, your rules.

H

Built by Harsh Parmar

Full-stack developer passionate about design systems, Svelte, and building tools that make developers' lives easier. Open to collaborations and feedback.