Cookie Consent Banner

The compliance component every production site needs. A bottom banner slides in after a short delay with three entry points — accept all, reject all, and manage preferences. "Manage preferences" opens a centered dialog with a switch per category (required categories are locked on); saving hands the consent object to onConsent and remembers it in localStorage, so returning visitors with a stored record are never bothered again. The first render outputs nothing at all, and localStorage is only read after mount, so SSR and hydration stay perfectly consistent.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<CookieConsentBanner/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/cookie-consent-banner.en.json

Usage

import {
  CookieConsentBanner,
  getStoredConsent,
} from "@/components/ui/cookie-consent-banner";

<CookieConsentBanner
  privacyHref="/privacy"
  onConsent={(consent, action) => {
    // Load analytics/marketing scripts only when consented
    if (consent.analytics) {
      // initAnalytics();
    }
  }}
/>;

// The stored record can be read back at any time (e.g. for conditional script loading)
const stored = getStoredConsent(); // StoredConsent | null

Props

CookieCategory

CookieConsentLabels

getStoredConsent(storageKey?) and clearStoredConsent(storageKey?) are also named exports, along with the ConsentAction ("accept-all" \| "reject-all" \| "custom"), StoredConsent (the stored shape with consent, action and updatedAt) and CookieConsentPosition types, so the application layer can read, clear and branch on the consent record.

How it works

• The banner waits about 0.6 s before sliding in — the page's main content gets to enter first, and the consent prompt does not steal the first glance
• The first render (including SSR) outputs nothing; only after mount does the component read localStorage to decide visibility, avoiding hydration mismatches
• localStorage is only touched inside effects and event handlers; the stored format is a StoredConsent JSON (consent object, action, ISO timestamp), and when localStorage is unavailable (e.g. private browsing) onConsent still fires so the caller can store the result itself
• Reject-all and save always record required categories as consented; non-required categories default to off in the dialog, following the "no tracking before consent" principle
• container is an escape hatch for showcases: docs sandboxes and Storybook can trap the banner inside a fixed-height box; production usage does not need it

Accessibility

• The banner is a role="region" named by its title, and all three actions are native button elements
• The preferences dialog is role="dialog" with aria-modal="true": focus moves into it on open, Tab cycles within it, and Esc or a backdrop click closes it and returns focus to the manage-preferences button
• Category switches use role="switch" with aria-checked; required categories are disabled, locked on, and marked with a badge
• When the user enables "reduce motion" at the system level, the slide in/out and dialog scale animations become quick cross-fades with no loss of function