npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

consent-kit

v1.0.0

Published

A lightweight implementation of a GDPR compliant banner and modal in vanilla javascript.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

joerivlekkenjoerivlekken

Keywords

Readme

consent-kit

consent-kit is a lightweight implementation of a GDPR-compliant banner and modal in vanilla JavaScript.

It allows the website visitor to easily accept all cookies or change his/her preferences through the preference screen.

Behind the scenes, consent-kit places a cookie containing the stored preferences. The content of this cookie can then easily be read with 3rd party tools. (Google Tag Manager is the most popular example)

The consent modal

Demo site

You can view a full working example on the consent-kit demo page.

Use cases

  • You want to implement a clean and lightweight cookie consent banner on your website that complies with the European General Data Protection Regulation (GDPR).
  • You want a responsive layout 'out of the box' but still be able to adapt the styling to your own preferences.
  • You want to present your website users with the option to select categories of cookies.

Installation

Include the CSS and JS on your website

You can choose to embed the CSS and JS files through the jsDelivr CDN network or install and host the packages yourself.

Embedding through CDN

Add the JS and CSS files in the <head> of your website:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/consent-kit.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/consent-kit.min.js"></script>

Alternative: install the npm packages

You can host the files yourself by installing the package and referencing the files in your project:

npm install consent-kit --save

Include the banner and modal

The banner and modal should be loaded inside the <body> of your website. See the example file in the docs/ folder.

Enable consent-kit

To enable consent-kit (and show the cookie banner when the consent cookie is not present), fire the consentKit() function in the '' of your website:

<script>
  consentKit({
    cookie_name: "consent_kit",
    expiry_days: 365,
  });
</script>

The consentKit() function requires 2 configuration parameters:

  1. cookie_name: the consent cookie will be saved under this name when your website visitors gives a consent.
  2. expiry_days: the expiration time (in days) for new consent cookies.

How it works

Once consent-kit is loaded on your website, it will first check if a valid consent has been given, in that case the consent banner and modal will remain hidden for your visitor.

In case consent has not yet been given, the consent banner will appear. The visitor will be presented with 2 choices:

Accept all cookies

If the visitor clicks the 'Accept all cookies' button, the banner will immediately disappear and the consent cookie will be installed with all cookie categories enabled.

Personal settings

If the visitor clicks the 'Personal settings' button, a modal will popup and the user will be presented with the 4 cookie categories:

  • Essential
  • Functional
  • Advertising
  • Analysis

Except for the essential cookies (this categorie can not be turned off, the switch is greyed out by default in the 'active' state) the visitor can choose for each categorie to enable or disable the preferred cookie category.

The cookie data

Once the cookie is updated: it will contain an array indicating the categories the visitors has consented to. Note that essential will always be included in the list.

The consent cookie installed by consent-kit

Using a Tag Manager

Work in progress.