# CookieYes for Developers > Open-source consent management for React, Next.js and plain JavaScript. The @cookieyes packages render a cookie banner, store the visitor's choice and load third-party tools only after consent. MIT licensed, runs in your frontend, no hosted runtime required. > Every page below is also available as Markdown: send `Accept: text/markdown` to the page URL. Agent skills: https://developers.cookieyes.com/.well-known/agent-skills/index.json - [Home](https://developers.cookieyes.com/): what the SDK does and how to start - [Playground](https://developers.cookieyes.com/playground): try the banner before installing ## Next.js - [Accessibility](https://developers.cookieyes.com/docs/nextjs/accessibility): What the components guarantee for keyboard, focus and screen-reader users, and what is still yours to check. - [AI coding assistants](https://developers.cookieyes.com/docs/nextjs/ai-agents): Install the CookieYes skills so Claude Code, Cursor, Codex, Copilot and other AI coding assistants set up consent with the current API. - [Block embeds](https://developers.cookieyes.com/docs/nextjs/embeds): Load YouTube videos, maps and other iframes only after the visitor consents, on any site. - [Migration & deprecations](https://developers.cookieyes.com/docs/nextjs/migration): Deprecated option names that still work, the current name for each, and the console warning that points you here. - [Network blocking](https://developers.cookieyes.com/docs/nextjs/network-blocking): Block a third-party tool's requests until its category is granted, when you cannot gate the tool itself. - [Translations](https://developers.cookieyes.com/docs/nextjs/translations): Show the banner and dialogs in your visitors' language, or change any text. - [Troubleshooting](https://developers.cookieyes.com/docs/nextjs/troubleshooting): Common CookieYes setup problems, like a banner that never shows or scripts loading before consent, and the one line to check for each. - [CookieBanner](https://developers.cookieyes.com/docs/nextjs/components/cookie-banner): The consent banner a visitor sees on their first visit. - [CookieOptOut](https://developers.cookieyes.com/docs/nextjs/components/cookie-opt-out): The Do Not Sell dialog for CCPA: one checkbox that opts the visitor out of every optional category, and respects Global Privacy Control. - [CookiePreferences](https://developers.cookieyes.com/docs/nextjs/components/cookie-preferences): The dialog where a visitor turns each cookie category on or off. - [GatedFrame](https://developers.cookieyes.com/docs/nextjs/components/gated-frame): Show a third-party iframe only after the visitor consents, with a placeholder until then. - [GatedScript](https://developers.cookieyes.com/docs/nextjs/components/gated-script): Load a third-party script only after the visitor consents. - [RecallButton](https://developers.cookieyes.com/docs/nextjs/components/recall-button): A floating button that lets a visitor change their cookie choice later. - [ReloadNotice](https://developers.cookieyes.com/docs/nextjs/components/reload-notice): Ask the visitor to reload when a withdrawn tool cannot be stopped otherwise. - [Configuration](https://developers.cookieyes.com/docs/nextjs/getting-started/configuration): Every option of initCookieYes(), grouped by what it changes. - [Installation](https://developers.cookieyes.com/docs/nextjs/getting-started/installation): Install the CookieYes SDK and get a working banner in three steps. - [Quick start](https://developers.cookieyes.com/docs/nextjs/getting-started/quick-start): A working cookie consent banner in about a minute: one CLI command detects your framework and writes the setup for you. - [Self-hosted mode](https://developers.cookieyes.com/docs/nextjs/getting-started/self-hosted): Send each consent decision to your own server as a record, and keep it as proof. - [Which API should I use?](https://developers.cookieyes.com/docs/nextjs/getting-started/which-api): Presets, primitives or hooks: pick the layer that fits, and the one hook for each job. - [Banner](https://developers.cookieyes.com/docs/nextjs/headless/banner): Build the consent banner with your own markup and classes, keeping CookieYes behaviour for showing, accepting, rejecting and translated text. - [OptOut](https://developers.cookieyes.com/docs/nextjs/headless/opt-out): Build the CCPA Do Not Sell dialog with your own markup. - [Preferences](https://developers.cookieyes.com/docs/nextjs/headless/preferences): Build the consent preferences dialog with your own markup, keeping the category switches, saving, focus handling and Escape to close. - [Focused hooks](https://developers.cookieyes.com/docs/nextjs/hooks/focused-hooks): Ten small hooks that each answer one question: is this category granted, which law applies, is the banner showing, and more. - [Runtime and server helpers](https://developers.cookieyes.com/docs/nextjs/hooks/low-level-hooks): Direct access to the runtime from plain code, and reading a returning visitor's consent on the server. - [useConsentActions](https://developers.cookieyes.com/docs/nextjs/hooks/use-consent-actions): Accept, reject, save or reset consent, and open the dialogs, from your own buttons. - [useConsent](https://developers.cookieyes.com/docs/nextjs/hooks/use-consent): Read the visitor's current consent state in a component, re-rendering whenever it changes, for settings pages and status displays. - [useOnConsentChange](https://developers.cookieyes.com/docs/nextjs/hooks/use-on-consent-change): Run your own code when the visitor's consent changes. - [Custom integration](https://developers.cookieyes.com/docs/nextjs/integrations/custom-integration): Load any script only after consent, with customScript() or a small integration object of your own. - [Google Analytics 4](https://developers.cookieyes.com/docs/nextjs/integrations/ga4): Load GA4 with one integration and let the SDK keep its Consent Mode signals up to date. - [Google Ads](https://developers.cookieyes.com/docs/nextjs/integrations/google-ads): Load Google Ads conversion tracking with one integration and let the SDK keep its Consent Mode signals up to date. - [Google Consent Mode v2](https://developers.cookieyes.com/docs/nextjs/integrations/google-consent-mode): Tell Google tags what the visitor allowed: add one default snippet, and the SDK sends every update. - [Google Tag Manager](https://developers.cookieyes.com/docs/nextjs/integrations/google-tag-manager): Load your GTM container after the Consent Mode default and let the SDK keep its signals up to date. - [Overview](https://developers.cookieyes.com/docs/nextjs/integrations): Load third-party tools only after consent, with a ready-made integration or your own. - [Meta Pixel](https://developers.cookieyes.com/docs/nextjs/integrations/meta-pixel): Load the Meta Pixel only after advertising consent, and pause it when consent is withdrawn. - [Microsoft Clarity](https://developers.cookieyes.com/docs/nextjs/integrations/microsoft-clarity): Load Microsoft Clarity only after analytics consent, and switch it to cookie-free mode when consent is withdrawn. - [PostHog](https://developers.cookieyes.com/docs/nextjs/integrations/posthog): Load PostHog with consent, or keep a PostHog you already load in sync with the visitor's choice. - [Segment](https://developers.cookieyes.com/docs/nextjs/integrations/segment): Load Segment only after analytics consent, and remove it with its identifiers when consent is withdrawn. - [Colour scheme](https://developers.cookieyes.com/docs/nextjs/styling/color-scheme): Show the consent banner and dialogs in light or dark colours, or follow the visitor's device setting, with the colorScheme option. - [Critical CSS](https://developers.cookieyes.com/docs/nextjs/styling/critical-css): Paint the banner on the first frame by inlining its rules in the HTML. - [CSP](https://developers.cookieyes.com/docs/nextjs/styling/csp): The SDK works under a strict Content-Security-Policy without unsafe-inline or a nonce. - [CSS variables reference](https://developers.cookieyes.com/docs/nextjs/styling/css-variables): Every --cy-* variable with its light and dark default, generated from the SDK's stylesheet. - [Custom CSS](https://developers.cookieyes.com/docs/nextjs/styling/custom-css): Change the width, spacing or any single element with a CSS rule on its part name. - [Styling](https://developers.cookieyes.com/docs/nextjs/styling/overview): Change the colours, font and layout of the banner and dialogs, and know which tool to use for each. - [Parts](https://developers.cookieyes.com/docs/nextjs/styling/part-and-state-contract): Every data-cy-part name the SDK renders, for CSS and for tests. - [Tailwind](https://developers.cookieyes.com/docs/nextjs/styling/tailwind): Use Tailwind utilities with the banner and dialogs, in the right order. - [Theme tokens](https://developers.cookieyes.com/docs/nextjs/styling/theme-tokens): Set the brand colour, corner radius and font once; every CookieYes surface follows. ## React - [Accessibility](https://developers.cookieyes.com/docs/react/accessibility): What the components guarantee for keyboard, focus and screen-reader users, and what is still yours to check. - [AI coding assistants](https://developers.cookieyes.com/docs/react/ai-agents): Install the CookieYes skills so Claude Code, Cursor, Codex, Copilot and other AI coding assistants set up consent with the current API. - [Block embeds](https://developers.cookieyes.com/docs/react/embeds): Load YouTube videos, maps and other iframes only after the visitor consents, on any site. - [Migration & deprecations](https://developers.cookieyes.com/docs/react/migration): Deprecated option names that still work, the current name for each, and the console warning that points you here. - [Network blocking](https://developers.cookieyes.com/docs/react/network-blocking): Block a third-party tool's requests until its category is granted, when you cannot gate the tool itself. - [Translations](https://developers.cookieyes.com/docs/react/translations): Show the banner and dialogs in your visitors' language, or change any text. - [Troubleshooting](https://developers.cookieyes.com/docs/react/troubleshooting): Common CookieYes setup problems, like a banner that never shows or scripts loading before consent, and the one line to check for each. - [CookieBanner](https://developers.cookieyes.com/docs/react/components/cookie-banner): The consent banner a visitor sees on their first visit. - [CookieOptOut](https://developers.cookieyes.com/docs/react/components/cookie-opt-out): The Do Not Sell dialog for CCPA: one checkbox that opts the visitor out of every optional category, and respects Global Privacy Control. - [CookiePreferences](https://developers.cookieyes.com/docs/react/components/cookie-preferences): The dialog where a visitor turns each cookie category on or off. - [GatedFrame](https://developers.cookieyes.com/docs/react/components/gated-frame): Show a third-party iframe only after the visitor consents, with a placeholder until then. - [GatedScript](https://developers.cookieyes.com/docs/react/components/gated-script): Load a third-party script only after the visitor consents. - [RecallButton](https://developers.cookieyes.com/docs/react/components/recall-button): A floating button that lets a visitor change their cookie choice later. - [ReloadNotice](https://developers.cookieyes.com/docs/react/components/reload-notice): Ask the visitor to reload when a withdrawn tool cannot be stopped otherwise. - [Configuration](https://developers.cookieyes.com/docs/react/getting-started/configuration): Every option of initCookieYes(), grouped by what it changes. - [Installation](https://developers.cookieyes.com/docs/react/getting-started/installation): Install the CookieYes SDK and get a working banner in three steps. - [Quick start](https://developers.cookieyes.com/docs/react/getting-started/quick-start): A working cookie consent banner in about a minute: one CLI command detects your framework and writes the setup for you. - [Self-hosted mode](https://developers.cookieyes.com/docs/react/getting-started/self-hosted): Send each consent decision to your own server as a record, and keep it as proof. - [Which API should I use?](https://developers.cookieyes.com/docs/react/getting-started/which-api): Presets, primitives or hooks: pick the layer that fits, and the one hook for each job. - [Banner](https://developers.cookieyes.com/docs/react/headless/banner): Build the consent banner with your own markup and classes, keeping CookieYes behaviour for showing, accepting, rejecting and translated text. - [OptOut](https://developers.cookieyes.com/docs/react/headless/opt-out): Build the CCPA Do Not Sell dialog with your own markup. - [Preferences](https://developers.cookieyes.com/docs/react/headless/preferences): Build the consent preferences dialog with your own markup, keeping the category switches, saving, focus handling and Escape to close. - [Focused hooks](https://developers.cookieyes.com/docs/react/hooks/focused-hooks): Ten small hooks that each answer one question: is this category granted, which law applies, is the banner showing, and more. - [Runtime and server helpers](https://developers.cookieyes.com/docs/react/hooks/low-level-hooks): Direct access to the runtime from plain code, and reading a returning visitor's consent on the server. - [useConsentActions](https://developers.cookieyes.com/docs/react/hooks/use-consent-actions): Accept, reject, save or reset consent, and open the dialogs, from your own buttons. - [useConsent](https://developers.cookieyes.com/docs/react/hooks/use-consent): Read the visitor's current consent state in a component, re-rendering whenever it changes, for settings pages and status displays. - [useOnConsentChange](https://developers.cookieyes.com/docs/react/hooks/use-on-consent-change): Run your own code when the visitor's consent changes. - [Custom integration](https://developers.cookieyes.com/docs/react/integrations/custom-integration): Load any script only after consent, with customScript() or a small integration object of your own. - [Google Analytics 4](https://developers.cookieyes.com/docs/react/integrations/ga4): Load GA4 with one integration and let the SDK keep its Consent Mode signals up to date. - [Google Ads](https://developers.cookieyes.com/docs/react/integrations/google-ads): Load Google Ads conversion tracking with one integration and let the SDK keep its Consent Mode signals up to date. - [Google Consent Mode v2](https://developers.cookieyes.com/docs/react/integrations/google-consent-mode): Tell Google tags what the visitor allowed: add one default snippet, and the SDK sends every update. - [Google Tag Manager](https://developers.cookieyes.com/docs/react/integrations/google-tag-manager): Load your GTM container after the Consent Mode default and let the SDK keep its signals up to date. - [Overview](https://developers.cookieyes.com/docs/react/integrations): Load third-party tools only after consent, with a ready-made integration or your own. - [Meta Pixel](https://developers.cookieyes.com/docs/react/integrations/meta-pixel): Load the Meta Pixel only after advertising consent, and pause it when consent is withdrawn. - [Microsoft Clarity](https://developers.cookieyes.com/docs/react/integrations/microsoft-clarity): Load Microsoft Clarity only after analytics consent, and switch it to cookie-free mode when consent is withdrawn. - [PostHog](https://developers.cookieyes.com/docs/react/integrations/posthog): Load PostHog with consent, or keep a PostHog you already load in sync with the visitor's choice. - [Segment](https://developers.cookieyes.com/docs/react/integrations/segment): Load Segment only after analytics consent, and remove it with its identifiers when consent is withdrawn. - [Colour scheme](https://developers.cookieyes.com/docs/react/styling/color-scheme): Show the consent banner and dialogs in light or dark colours, or follow the visitor's device setting, with the colorScheme option. - [Critical CSS](https://developers.cookieyes.com/docs/react/styling/critical-css): Paint the banner on the first frame by inlining its rules in the HTML. - [CSP](https://developers.cookieyes.com/docs/react/styling/csp): The SDK works under a strict Content-Security-Policy without unsafe-inline or a nonce. - [CSS variables reference](https://developers.cookieyes.com/docs/react/styling/css-variables): Every --cy-* variable with its light and dark default, generated from the SDK's stylesheet. - [Custom CSS](https://developers.cookieyes.com/docs/react/styling/custom-css): Change the width, spacing or any single element with a CSS rule on its part name. - [Styling](https://developers.cookieyes.com/docs/react/styling/overview): Change the colours, font and layout of the banner and dialogs, and know which tool to use for each. - [Parts](https://developers.cookieyes.com/docs/react/styling/part-and-state-contract): Every data-cy-part name the SDK renders, for CSS and for tests. - [Tailwind](https://developers.cookieyes.com/docs/react/styling/tailwind): Use Tailwind utilities with the banner and dialogs, in the right order. - [Theme tokens](https://developers.cookieyes.com/docs/react/styling/theme-tokens): Set the brand colour, corner radius and font once; every CookieYes surface follows. ## JavaScript - [AI coding assistants](https://developers.cookieyes.com/docs/core/ai-agents): Install the CookieYes skills so Claude Code, Cursor, Codex, Copilot and other AI coding assistants set up consent with the current API. - [Block embeds](https://developers.cookieyes.com/docs/core/embeds): Load YouTube videos, maps and other iframes only after the visitor consents, on any site. - [Migration & deprecations](https://developers.cookieyes.com/docs/core/migration): Deprecated option names that still work, the current name for each, and the console warning that points you here. - [Network blocking](https://developers.cookieyes.com/docs/core/network-blocking): Block a third-party tool's requests until its category is granted, when you cannot gate the tool itself. - [Configuration](https://developers.cookieyes.com/docs/core/getting-started/configuration): Every option of initCookieYes(), grouped by what it changes. - [Installation](https://developers.cookieyes.com/docs/core/getting-started/installation): Install the CookieYes SDK and get a working banner in three steps. - [Self-hosted mode](https://developers.cookieyes.com/docs/core/getting-started/self-hosted): Send each consent decision to your own server as a record, and keep it as proof. - [Custom integration](https://developers.cookieyes.com/docs/core/integrations/custom-integration): Load any script only after consent, with customScript() or a small integration object of your own. - [Google Analytics 4](https://developers.cookieyes.com/docs/core/integrations/ga4): Load GA4 with one integration and let the SDK keep its Consent Mode signals up to date. - [Google Ads](https://developers.cookieyes.com/docs/core/integrations/google-ads): Load Google Ads conversion tracking with one integration and let the SDK keep its Consent Mode signals up to date. - [Google Consent Mode v2](https://developers.cookieyes.com/docs/core/integrations/google-consent-mode): Tell Google tags what the visitor allowed: add one default snippet, and the SDK sends every update. - [Google Tag Manager](https://developers.cookieyes.com/docs/core/integrations/google-tag-manager): Load your GTM container after the Consent Mode default and let the SDK keep its signals up to date. - [Overview](https://developers.cookieyes.com/docs/core/integrations): Load third-party tools only after consent, with a ready-made integration or your own. - [Meta Pixel](https://developers.cookieyes.com/docs/core/integrations/meta-pixel): Load the Meta Pixel only after advertising consent, and pause it when consent is withdrawn. - [Microsoft Clarity](https://developers.cookieyes.com/docs/core/integrations/microsoft-clarity): Load Microsoft Clarity only after analytics consent, and switch it to cookie-free mode when consent is withdrawn. - [PostHog](https://developers.cookieyes.com/docs/core/integrations/posthog): Load PostHog with consent, or keep a PostHog you already load in sync with the visitor's choice. - [Segment](https://developers.cookieyes.com/docs/core/integrations/segment): Load Segment only after analytics consent, and remove it with its identifiers when consent is withdrawn. - [Build your own UI](https://developers.cookieyes.com/docs/core/store/build-your-own-ui): A banner and a preferences dialog in plain JavaScript, drawn from the consent store. - [Using the store directly](https://developers.cookieyes.com/docs/core/store/using-the-store): Read consent, react to it and change it from plain JavaScript. ## Changelog - [react 0.2.0: Server-rendered banner and smaller bundles](https://developers.cookieyes.com/docs/changelog/2026-06-25): Server-rendered banner and smaller bundles. The CookieYes SDK release of 25 June 2026. - [react 0.3.0: Custom categories, Consent Mode v2 and strict CSP](https://developers.cookieyes.com/docs/changelog/2026-07-20): Custom categories, Consent Mode v2 and strict CSP. The CookieYes SDK release of 20 July 2026. - [cli 0.2.1: CLI dependency update](https://developers.cookieyes.com/docs/changelog/2026-07-27): CLI dependency update. The CookieYes SDK release of 27 July 2026. - [react 0.4.0: Consent events, live language switching, restyling](https://developers.cookieyes.com/docs/changelog/2026-08-05): Consent events, live language switching, restyling. The CookieYes SDK release of 5 August 2026. - [react 0.5.0: Geo-detection, script integrations and critical CSS](https://developers.cookieyes.com/docs/changelog/2026-08-17): Geo-detection, script integrations and critical CSS. The CookieYes SDK release of 17 August 2026. - [react 0.6.0: Translatable labels, part styling and script presets](https://developers.cookieyes.com/docs/changelog/2026-09-01): Translatable labels, part styling and script presets. The CookieYes SDK release of 1 September 2026. - [react 0.6.1: README corrections](https://developers.cookieyes.com/docs/changelog/2026-09-03): README corrections. The CookieYes SDK release of 3 September 2026. - [react 0.7.0: A smaller initial download](https://developers.cookieyes.com/docs/changelog/2026-09-08): A smaller initial download. The CookieYes SDK release of 8 September 2026. - [react 0.8.0: Banner CSS in the first response](https://developers.cookieyes.com/docs/changelog/2026-09-10): Banner CSS in the first response. The CookieYes SDK release of 10 September 2026. - [react 0.9.0: Accessibility fixes across the banner and dialogs](https://developers.cookieyes.com/docs/changelog/2026-09-18): Accessibility fixes across the banner and dialogs. The CookieYes SDK release of 18 September 2026. - [react 0.10.0: A modal banner and a close button that only closes](https://developers.cookieyes.com/docs/changelog/2026-09-25): A modal banner and a close button that only closes. The CookieYes SDK release of 25 September 2026. - [react 0.11.0: Provable consent records and per-module imports](https://developers.cookieyes.com/docs/changelog/2026-09-30): Provable consent records and per-module imports. The CookieYes SDK release of 30 September 2026. - [Changelog](https://developers.cookieyes.com/docs/changelog): All notable changes to the CookieYes SDK. Follows Keep a Changelog and Semantic Versioning.