Alpine JS Cookie Banner

Alpine JS directive that adds simple cookie banner functionality.

Example 👀

<div x-data x-cookie-banner>
  We use cookies <a href="#">click here</a> to find out more.

  <button> Got it </button>

It works by listening for a click even on a <button> element which when clicked will hide the cookie banner.

This is a basic example that uses the default localStorage option. If you want to use sessionStorage then you’d write x-cookie-banner.session

You can pass any HTML you want, but make sure you do pass a <button> or there’s no way for the user to close the cookie banner.

Install 🌟

It’s very easy to install Alpine JS plugins! 🙌


  src="[email protected]/dist/cookie.min.js"

  src="[email protected]/dist/cdn.min.js"

<script defer src="[email protected]/dist/cdn.min.js"></script>


npm i -D alpinejs-cookie-banner

yarn add -D alpinejs-cookie-banner

Then you can register the plugin.

import Alpine from 'alpinejs';
import cookie from 'alpinejs-cookie-banner';


window.Alpine = Alpine;


Stats 📊

Here’s some stats about the Alpine JS Persist Extended package! As you can see, it’s tiny 🤏


View Github