Get started with ConsentLeaf

Cookie consent, beautifully simple. ConsentLeaf is a fork of CookieConsent v3.1.0 by Orest Bida, with a new visual identity and a warm teal theme.

Preview the design

From the repository root:

pnpm install
pnpm build
pnpm docs:build
pnpm brand:dev

Open http://localhost:4173 for the website, or http://localhost:4173/brand/ for the logo, colours, and live light and dark previews.

Add ConsentLeaf to your website

Copy this fork's dist folder into your public assets. The bundle filenames and API stay compatible with CookieConsent. The following example assumes the files are available at /dist/.

<link rel="stylesheet" href="/dist/cookieconsent.css">

<button type="button" data-cc="show-preferencesModal">
  Cookie preferences
</button>

<script type="module">
  import * as ConsentLeaf from '/dist/cookieconsent.esm.js';

  ConsentLeaf.run({
    guiOptions: {
      consentModal: {
        layout: 'box inline',
        position: 'bottom right',
        equalWeightButtons: true
      },
      preferencesModal: {
        layout: 'box',
        equalWeightButtons: true
      }
    },
    categories: {
      necessary: { enabled: true, readOnly: true },
      analytics: {}
    },
    language: {
      default: 'en',
      translations: {
        en: {
          consentModal: {
            title: 'A little note on cookies',
            description: 'We use essential cookies to keep things running. With your permission, analytics help us improve the site.',
            acceptAllBtn: 'Accept all',
            acceptNecessaryBtn: 'Reject optional',
            showPreferencesBtn: 'Choose preferences'
          },
          preferencesModal: {
            title: 'Cookie preferences',
            acceptAllBtn: 'Accept all',
            acceptNecessaryBtn: 'Reject optional',
            savePreferencesBtn: 'Save my choices',
            closeIconLabel: 'Close preferences',
            sections: [
              {
                title: 'Essential',
                description: 'Required to run the site and remember your choices.',
                linkedCategory: 'necessary'
              },
              {
                title: 'Analytics',
                description: 'Help us understand how the site is used.',
                linkedCategory: 'analytics'
              }
            ]
          }
        }
      }
    }
  });
</script>

Connect optional scripts using type="text/plain" and data-category, as described in script management. Update the copy, cookie information, and policy links to match your site.

Dark mode

Add cc--darkmode to your page's html element. Light mode uses white labels on teal buttons; dark mode uses dark labels on mint buttons.

document.documentElement.classList.toggle('cc--darkmode', useDarkTheme);

The embedded widget uses system fonts and makes no font requests. See UI customization for CSS variables and layout options.

Distribution and attribution

ConsentLeaf uses private source and direct distribution of its built assets. Public npm publication is not planned. An authenticated private registry can be configured later for internal package distribution; npm publication is currently blocked in the package manifests.

Instructions elsewhere in the inherited documentation that install vanilla-cookieconsent or load the upstream CDN refer to the original project, which does not include this theme. Use this repository's built files for ConsentLeaf.

The consent engine and public API come from the upstream MIT-licensed project. Keep the included LICENSE when redistributing the library.