Cookie Consent

Cookie consent modal with reusable controller and consent events.

Loading preview...

Installation

pnpm dlx shadcn@latest add @blocks/cookie-consent

New to Circle? Get started.

About

Use this for Circle consent capture when preferences need to persist across Circle production domains.

Usage

import {
  CookieConsent,
  createCookieConsentController,
  createCookieConsentCookieStorage,
} from "@/registry/berlin/blocks/cookie-consent";

const sharedCookieDomain = ".circle.health";

function resolveSharedCookieDomain(location: Location) {
  const hostname = location.hostname.toLowerCase();

  if (hostname === "circle.health" || hostname.endsWith(sharedCookieDomain)) {
    return sharedCookieDomain;
  }

  return null;
}

const controller = createCookieConsentController({
  storage: createCookieConsentCookieStorage({
    days: 180,
    domain: resolveSharedCookieDomain,
    sameSite: "Lax",
    secure: process.env.NODE_ENV === "production" ? true : undefined,
  }),
});

export function CookieConsentProvider() {
  return <CookieConsent controller={controller} />;
}

Dependencies

Registry

@circle-ui/button
@circle-ui/sheet
@circle-ui/switch
@circle-ui/utils

Source

pnpm dlx shadcn@latest add https://registry.circle.health/blocks/cookie-consent.json
/blocks/cookie-consent.json