Next.js

@theme-kit/next

App RouterRSCZero-flash6 exports

App Router integration: SSR-safe hydration, cookie persistence and zero flash of incorrect theme.

Installation

Install the integration alongside @theme-kit/core.

bash

pnpm add @theme-kit/next

Quick Start

Complete copy-paste usage for this package.

app/layout.tsx

tsx

1// app/layout.tsx
2import { ThemeProvider } from "@theme-kit/next";
3
4export default function RootLayout({ children }) {
5  return (
6    <ThemeProvider
7      themes={themes}
8      defaultTheme="light"
9      className="antialiased"
10      body={{ className: "font-sans" }}
11    >
12      {children}
13    </ThemeProvider>
14  );
15}

More Examples

Additional patterns for Next.js.

ThemeSwitcher.tsx

tsx

1// components/ThemeSwitcher.tsx
2"use client";
3import { useTheme } from "@theme-kit/next/client";
4
5export function ThemeSwitcher() {
6  const { theme, mode, setMode, toggleTheme } = useTheme();
7  return (
8    <div>
9      <span>{theme.name} | {mode}</span>
10      <button onClick={toggleTheme}>Toggle</button>
11      <button onClick={() => setMode("light")}>Light</button>
12      <button onClick={() => setMode("dark")}>Dark</button>
13      <button onClick={() => setMode("system")}>System</button>
14    </div>
15  );
16}

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/next.

Server

Export	Description
`ThemeProvider (RSC)`	Reads cookies, validates the fingerprint, resolves the initial theme and renders `<html data-theme>` with a blocking bootstrap script.
`HTML passthrough`	Accepts every native `<html>` attribute — className, style, dir, data-* — plus `body` for the `<body>` element.
`SSR Persistence`	`createNextThemePersistence(themes, defaultTheme)` mirrors selection to cookies.

Client

Export	Description
`ClientThemeProvider`	Cookie + localStorage persistence, fingerprint, `.dark` class sync.
`@theme-kit/next/client`	Re-exports every React hook plus ThemeScope, ThemeInspector, ThemeModeButton.
`ThemeBootstrap`	Injects SSR dark-mode CSS via useServerInsertedHTML.