Installation

Three steps, about five minutes. If you would rather have the files written for you, run npx @cookieyes/cli init: it does exactly what this page does. See Quick start.

Prerequisites

Requirement	Minimum
Node.js	20
Next.js	14, App Router or Pages Router
React	18

1. Install

npm install @cookieyes/nextjs

This is the only package you install.

One file: the configuration, the stylesheet, and the three components.

app/consent-manager.tsx

"use client";

import { CookieBanner, CookiePreferences, RecallButton, initCookieYes } from "@cookieyes/nextjs";
import "@cookieyes/nextjs/styles.css";

initCookieYes({
  mode: "cookie-only", // no backend needed
  regulation: "GDPR", // "GDPR" | "CCPA"
});

export function CookieYesRoot() {
  return (
    <>
      <CookieBanner />
      <CookiePreferences />
      <RecallButton />
    </>
  );
}

The file must start with "use client": the banner runs in the browser, and so does initCookieYes().

The stylesheet import is required. The components ship no inline styling, so without it they render as plain text, with no error to tell you why.

3. Render it once

app/layout.tsx

import { CookieYesRoot } from "./consent-manager";

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

The layout stays a Server Component; only consent-manager.tsx is client code.

Put it before your page content, so the banner is early in the DOM: screen readers announce it first, and it paints before the rest of the page.

Done. Reload the page and the banner appears. If it does not, see Common mistakes.

Common mistakes

The banner renders as unstyled text. The stylesheet import is missing. Keep the styles.css import in consent-manager.tsx, where the example above has it.

Nothing renders: no banner, no error anywhere. initCookieYes() never ran, because the file that calls it is not imported anywhere. Make sure <CookieYesRoot /> is rendered, as in step 3. There is no error by design.

You're importing a component that needs "use client" consent-manager.tsx lost its "use client" line, or you called initCookieYes() directly in layout.tsx. Keep the call and the components in the client file.

The banner appears for a second, then disappears, for a visitor who already chose. Expected by default: the server does not know the visitor's decision, so it renders the banner and the browser removes it. To fix it, read the decision on the server and pass it in. See Runtime and server helpers.

Next steps

Configuration: every option of initCookieYes(), including CCPA and languages
Integrations: load Google Analytics, Meta Pixel and other tags only after consent
Styling: match the banner to your brand