Next.js App Router

Install and create the wrapper

Follow the Quickstart. The CookieBanner file must start with 'use client'.

Import the theme stylesheet in your root layout:

import '@peax/consent-banner-theme/styles.css'
import { ConsentIntegration } from './consent-integration'
import type { ReactNode } from 'react'

export default function RootLayout({ children }: { children: ReactNode }) {
  return <html lang="en"><body>{children}<ConsentIntegration /></body></html>
}

Keep callbacks in the client boundary

'use client'

import { useState } from 'react'

import { CookieBanner } from './cookie-banner'
import type { Preferences } from './cookie-banner'

export function ConsentIntegration() {
	const [choices, setChoices] = useState<Preferences | null>(null)
	return (
		<>
			<p role="status">{choices ? 'Demo choices recorded in memory.' : 'No demo choice recorded.'}</p>
			<CookieBanner initialPreferences={null} onCommit={setChoices} />
		</>
	)
}

Copy this integration alongside the wrapper, adjusting its relative import as needed. This example keeps choices in memory; connect your actual storage and optional-service controls before shipping.

When reading saved consent on the server, pass serializable data into the client wrapper and keep first-render values consistent. Keep functions such as onCommit inside the client boundary. With client-only storage, wait until restoration completes before initializing the wrapper.

Verify your integration

Check a fresh visit, a returning visit, Accept, Reject, Apply and reopening choices. Confirm that optional scripts remain blocked before consent and respond to revocation. See integration responsibilities.