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

1. Install

npm install @cookieyes/react

This is the only package you install.

2. Create the consent manager

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

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

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

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

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

import { createRoot } from "react-dom/client";
import { CookieYesRoot } from "./consent-manager";

createRoot(document.getElementById("root") as HTMLElement).render(
  <>
    <CookieYesRoot />
    <h1>Your app</h1>
  </>,
);

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.

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