Installation

Add the kit to a Next.js app, import the stylesheet and scope the tokens. The package ships source, so Next transpiles it directly.

Requirements

React 19 and React DOM 19
Next.js 15 or newer (App Router)
Tailwind CSS 4

1. Install the package

Terminal

npm install @nphuonha/ui-kit

2. Transpile the package

The package exports TypeScript source. Add it to transpilePackages so Next.js compiles it with your app.

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@nphuonha/ui-kit"],
};

export default nextConfig;

3. Import the stylesheet

Import the styles once at the root of your app. The file includes Tailwind, the structural layer and the theme tokens.

app/layout.tsx

import "@nphuonha/ui-kit/styles.css";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-ui="kit">
      <body>{children}</body>
    </html>
  );
}

4. Use a component

app/page.tsx

import { Button, Field, Input } from "@nphuonha/ui-kit";

export default function Page() {
  return (
    <div data-ui="kit" className="flex max-w-sm flex-col gap-4">
      <Field label="Email">
        <Input placeholder="[email protected]" type="email" />
      </Field>
      <Button>Continue</Button>
    </div>
  );
}

Scope and portals

Tokens live under [data-ui="kit"]. Put the attribute on <html> so portalled overlays (dialog, sheet, popover, select) inherit the same tokens.

If you prefer a scoped wrapper, add data-ui="kit" to a wrapper and also to your portal root, or use the container prop where the primitive supports it.

Dark mode

Toggle the dark class on the element that also has data-ui="kit".

Theme toggle

document.documentElement.classList.toggle("dark", isDark);

No provider required

The kit is CSS-first. A theme provider is only useful for persisting the preference and applying accent variables; this documentation site includes a small example.