Getting started

libconsent is a React layer over cookie consent. Your components read consent through useConsent(), useHasConsent() and <CookieService>; an adapter translates whatever your consent platform actually says into that shape.

There are two ways to arrive here:

• You already run a cookie banner (CMP) — Usercentrics, Cookiebot, OneTrust, consentmanager.net. It keeps drawing its own banner; libconsent makes its answer readable from React.
• You don't have one yet — libconsent keeps consent in the browser and gives you a shadcn/ui banner to render it.

Either way, steps 2 and 3 below are identical.

1. Install and connect

Install the core package plus the adapter for your platform, then wrap your app once. libconsent will automatically load and manage the CMP's script.

npm i @libconsent/core @libconsent/usercentrics

import { ConsentProvider } from "@libconsent/core";
import { usercentrics } from "@libconsent/usercentrics";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ConsentProvider adapter={usercentrics({ settingsId: "AbCdEf123" })}>
          {children}
        </ConsentProvider>
      </body>
    </html>
  );
}

Also supported: consentmanager.net, iubenda, Osano, TrustArc, Klaro and IAB GPP for US opt-out signals — see all adapters.

2. Gate a script

Wrap anything that may only run with consent:

import { CookieService } from "@libconsent/core";
import { GoogleAnalytics } from "@next/third-parties/google";

<CookieService id="google-analytics">
  <GoogleAnalytics gaId="G-XXXXXXX" />
</CookieService>;

<ConsentScript
  id="hotjar"
  src="https://static.hotjar.com/c/hotjar-123.js?sv=6"
/>

For a list of all natively supported IDs, see built-in services. For anything else that's not in the list, simply give it a name and a category:

<CookieService id="acme-chat" name="Acme Chat" category="functional">
  <AcmeChat />
</CookieService>

For a vendor snippet you'd otherwise paste into <head>, there is <ConsentScript> — see Gating for the rest.

3. Read consent anywhere

If you need more low-level info or want to run some logic when consent changes, use the hooks:

import { useConsent, useHasConsent } from "@libconsent/core";

function Component() {
  const allowed = useHasConsent("google-analytics");
  const { openSettings, acceptAll, reset /* ... */ } = useConsent();

  useEffect(() => {
    if (allowed) {
      // run some custom logic
    }
  }, [allowed]);
}

That's the whole API

Six exports cover almost every integration:

Where to next

• Gating — every way to put consent in front of something
• Service catalog — what's built in, and adding your own
• The banner — the shadcn component, translations, custom UIs
• Next.js — App Router, @next/third-parties, server-side reads
• Adapters — what each platform can do, and writing your own
• API reference