Knit UI
GitHub

Next.js

Install

npm install @knitui/core @knitui/components @knitui/plugins \
  react-native-web react-native-reanimated react-native-teleport

Configure

next.config.mjs
import { withKnitui } from "@knitui/plugins/next-plugin";

export default withKnitui({
  reactStrictMode: true,
  transpilePackages: [
    "react-native-web",
    "react-native-reanimated",
    "react-native-gesture-handler",
    "@knitui/core",
    "@knitui/components",
    // …plus any satellite package you use
  ],
});
package.json
{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}

transpilePackages is required because the kit source-ships; Next has to compile its TypeScript rather than consume a prebuilt bundle.

Root layout

app/layout.tsx
import { NextTamaguiProvider } from "@knitui/plugins/next";

import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NextTamaguiProvider>
          <Providers>{children}</Providers>
        </NextTamaguiProvider>
      </body>
    </html>
  );
}
app/providers.tsx
"use client";

import { Provider } from "@knitui/core";

export function Providers({ children }: { children: React.ReactNode }) {
  return <Provider defaultColorScheme="system">{children}</Provider>;
}

The split matters: NextTamaguiProvider flushes generated CSS into the server HTML, Provider is the runtime context. See Server rendering for what hydrates and what has to stay client-only.

Static export

output: "export" works — nothing in the kit needs a request-time server. This documentation site is a static export with the kit rendering every example.

Pitfalls

  • A component throws about document. Load it with dynamic(..., { ssr: false }). Skia, MapLibre and media surfaces always need this.
  • Cold start is slow, bundle is huge. You are pulling a generated barrel; withKnitui sets optimizePackageImports, but check you have not added @knitui/icons to transpilePackages without it.
  • Styles flash in late. NextTamaguiProvider is missing or too deep.