ayal-klaro-consent

A small React consent layer powered by Klaro. It provides a neutral accessible interface and a headless API for project-specific designs.

Install

npm install ayal-klaro-consent

Import the shared stylesheet once from the root layout:

import "ayal-klaro-consent/styles.css";

Necessary-only setup

"use client";

import {
  ConsentRoot,
  ENGLISH_CONSENT_COPY,
  type ConsentConfiguration,
} from "ayal-klaro-consent";
import "ayal-klaro-consent/styles.css";

const config: ConsentConfiguration = {
  storageName: "example_consent_v1",
  policyUrl: "/cookies",
  copy: ENGLISH_CONSENT_COPY,
  services: [],
};

export function SiteConsent() {
  return <ConsentRoot config={config} />;
}

An empty services array does not show a first-visit banner. The settings dialog remains available through CookieSettingsButton.

Optional services

Only declare services that are active:

const config: ConsentConfiguration = {
  storageName: "example_consent_v1",
  policyUrl: "/cookies",
  copy: ENGLISH_CONSENT_COPY,
  services: [
    {
      name: "analytics",
      title: "Website analytics",
      description: "Helps us understand how visitors use the website.",
      purpose: "analytics",
      cookies: ["_ga", /^_ga_/],
      onAccept: enableAnalytics,
      onDecline: disableAnalytics,
    },
  ],
};

Optional services use one of three purposes: analytics, marketing, or external_media. They are denied until a visitor makes a choice.

Custom interfaces and service loading

Use ConsentProvider, NeutralConsentUI, and useConsent when a site needs a custom interface or must conditionally load an external service.

• choices contains the current, unsaved preference draft.
• appliedChoices contains the saved choices that services may act on.

Never load a service from choices.

Styling

The neutral interface can be adjusted through CSS variables including --ayal-consent-surface, --ayal-consent-text, --ayal-consent-accent, --ayal-consent-radius, and --ayal-consent-shadow.

Project boundaries

Only declare services that are active. Keep organization details, legal text, tracking IDs, provider callbacks, and branded styles inside the consuming site.