Next.js integration

Next setup

Place the provider in a client boundary near the application root. Emit the Marwes theme script before hydration when the theme follows system or stored preference.

1. Complete the React setup.
2. Render one provider at the application boundary.
3. Keep server and browser theme initialization aligned.
4. Run pnpm dlx @marwes-ui/cli doctor --run-build.

// app/providers.tsx
"use client"

import { MarwesProvider } from "@marwes-ui/react"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <MarwesProvider
      defaultPreference="system"
      storageKey="marwes-theme"
      target="html"
      attribute="class"
      variableStrategy="style-tag"
    >
      {children}
    </MarwesProvider>
  )
}

// app/layout.tsx
import { MarwesThemeScript, MarwesThemeStyle } from "@marwes-ui/react"
import { Providers } from "./providers"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <MarwesThemeStyle target="html" attribute="class" />
        <MarwesThemeScript
          storageKey="marwes-theme"
          defaultPreference="system"
          target="html"
          attribute="class"
        />
      </head>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}