Skip to content
astro-cookie-consent
DocumentationBlog

GDPR Cookie Consent Banner for Astro

GDPR & ePrivacy‑minded by design

astro-cookie-consent

Free forever — MIT licensed, unlimited sites

latest npm versionlatest release date

A tiny, dependency-free cookie consent banner for Astro. No dark patterns, no pre-ticked boxes, no permanent silent consent — the mechanics regulators actually check for, built in by default.

npm install astro-cookie-consent
npm downloads per weeknpm total downloads
Get StartedLive DemoView on GitHub
Now previewing: Default (dark)

Live — not a screenshot

Waiting for consent…
Live DemoThe same banner, with a status readout showing exactly what gets stored.
Example themesTen ready-made looks — click a swatch to restyle it instantly.

Built for GDPR compliance

Section titled “Built for GDPR compliance”

A cookie banner people can't actually use isn't compliant. These are the mechanics that regulators (CNIL, ICO, EDPB) actually check for — built in by default, not bolted on:

This library is a mechanism, not legal advice — your privacy policy, the categories you declare, and what you gate behind them are still on you. See exactly what this does and doesn’t cover →

No dark patterns

Accept and decline are given equal visual weight. No filled "Accept" button next to a washed-out "Decline" nudging visitors toward consent.

No pre-ticked boxes

Every category defaults to off. Genuine opt-in, not opt-out disguised as a choice.

Consent expires

Choices expire after a configurable period (365 days by default) and the banner reappears — no permanent silent consent from a choice made a year ago.

A record you can point to

Every choice is stored with a timestamp, retrievable via getConsentRecord() — something to show if you ever need to demonstrate consent was given (Art. 7(1) accountability).

Section titled “Why astro-cookie-consent”

Every feature you'd expect from a paid consent-management platform, built into one free, dependency-free component.

Zero dependencies

Ships as plain .astro/.js source, compiled by your own project's Astro pipeline. No runtime dependencies.

Actually gates scripts

gateScript() blocks third-party scripts until the visitor accepts — not just an informational banner that lets trackers load anyway.

API reference

Per-category consent

Optional analytics/marketing-style category toggles, or a single accept/decline if you don't need that.

Learn more

Fully customizable

Every visual is 7 CSS custom properties, and every string of copy is a prop — no hardcoded text to fork, no design system to fight.

Learn more

Light & dark mode

Follows the visitor's OS color scheme automatically, or pin a theme with a data-theme attribute.

Learn more

Works with AI coding agents

Ships a SKILL.md documenting its own API and guardrails, so an agent can safely customize it — change copy, gate a new script, add a theme — without guessing.

Learn more

Pricing

Section titled “Pricing”

One plan: everything, for everyone, free forever.

Free Forever

$0/forever

Unlimited sites. No credit card, ever.

  • Unlimited sites
  • Every feature, no gated tiers
  • Per-category consent
  • Script gating with gateScript()
  • All themes & full CSS customization
  • No account, no tracking, no telemetry
Get Started

MIT licensed — open source, forever free.

Make it yours

Section titled “Make it yours”

Fully customizable, right down to the last pixel and word — every visual is 7 CSS custom properties, no build step, no config file.

Explore all themes →

Quick look

Section titled “Quick look”
src/layouts/Layout.astro
---
import ConsentBanner from 'astro-cookie-consent/ConsentBanner.astro';
---


<html>
  <body>
    <slot />
    <ConsentBanner privacyHref="/privacy" />
  </body>
</html>
<script>
  import { gateScript } from 'astro-cookie-consent';


  gateScript({ src: 'https://example-widget.com/embed.js' });
</script>

That’s it — no config file, no CSS to write, no dependency to audit.

Ready to add it to your site?

Get Started