Next.js

@themvora/next

App RouterRSCZero-flash6 exports

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

Verified with Themvora 2.0.0·Updated 2026-09-17

Prerequisites

Package Manager

npm, pnpm, yarn, or bun

Dependencies

@themvora/core (peer dependency)

Use Case

Next.js projects with theme support

Installation

View on npm ↗Source ↗

Install the integration — @themvora/core is pulled in automatically as a dependency.

bash

pnpm add @themvora/next

Quick Start

Complete copy-paste usage for this package.

app/layout.tsx

TSX / JSX

// app/layout.tsx
import { ThemeProvider } from "@themvora/next";

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      defaultTheme="light"
      className="antialiased"
      body={{ className: "font-sans" }}
    >
      {children}
    </ThemeProvider>
  );
}

More Examples

Additional patterns for Next.js.

ThemeSwitcher.tsx

TSX / JSX

// components/ThemeSwitcher.tsx
"use client";
import { useTheme } from "@themvora/next/client";

export function ThemeSwitcher() {
  const { theme, mode, setMode, toggleTheme } = useTheme();
  return (
    <div>
      <span>{theme.name} | {mode}</span>
      <button onClick={toggleTheme}>Toggle</button>
      <button onClick={() => setMode("light")}>Light</button>
      <button onClick={() => setMode("dark")}>Dark</button>
      <button onClick={() => setMode("system")}>System</button>
    </div>
  );
}

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.
`@themvora/next/client`	Re-exports every React hook plus ThemeScope, ThemeInspector, ThemeModeButton.
`ThemeBootstrap`	Injects SSR dark-mode CSS via useServerInsertedHTML.