CookieConsent

Code

import { CookieConsent, consentModeSignals, DEFAULT_CONSENT_CATEGORIES } from "@fadymondy/nasaq/web";export function Consent({ saved }: { saved: Record<string, boolean> | null }) {  return (    <CookieConsent      consent={saved}      policyHref="/cookies"      onSave={(state) => {        localStorage.setItem("consent", JSON.stringify(state));        window.gtag?.("consent", "update", consentModeSignals(state, DEFAULT_CONSENT_CATEGORIES));      }}    />  );}declare global {  interface Window {    gtag?: (...args: unknown[]) => void;  }}

Website · beta

Live examples and controls: CookieConsent in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/cookie-consent.json

Asks a visitor which kinds of storage they allow. A banner offers Customise, Reject and Accept with the same visual weight; Customise opens a dialog with one switch per category and a table of the cookies in it. The component stores nothing and runs nothing: onSave gets the choice, and consentModeSignals turns it into Google Consent Mode v2 values for you to pass on.

When to useCopy Anchor Link

• A public site that sets non-essential cookies or storage.

When not to useCopy Anchor Link

• Sites that only use strictly necessary storage: no banner is needed.
• As a tracker: this component contains no tracking code.

ImportCopy Anchor Link

import { CookieConsent, consentModeSignals } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { CookieConsent, consentModeSignals, DEFAULT_CONSENT_CATEGORIES } from "@fadymondy/nasaq/web";

export function Consent({ saved }: { saved: Record<string, boolean> | null }) {
  return (
    <CookieConsent
      consent={saved}
      policyHref="/cookies"
      onSave={(state) => {
        localStorage.setItem("consent", JSON.stringify(state));
        window.gtag?.("consent", "update", consentModeSignals(state, DEFAULT_CONSENT_CATEGORIES));
      }}
    />
  );
}

declare global {
  interface Window {
    gtag?: (...args: unknown[]) => void;
  }
}

AnatomyCopy Anchor Link

CookieConsent                 data-slot="cookie-consent"
├─ banner (shown when consent is null)
│  ├─ text + policy link
│  └─ Customise · Reject all · Accept all
└─ Dialog (preferences)
   ├─ per category: Switch + description
   │  └─ Collapsible cookie table (name, purpose, duration, provider)
   └─ Reject all · Save choices · Accept all

APICopy Anchor Link

section props (except children, onChange) plus:

Helpers: acceptAll, rejectAll, normalizeConsent, consentSource, consentModeSignals, DEFAULT_CONSENT_CATEGORIES.

ExamplesCopy Anchor Link

Reopen from a footer link

import { CookieConsent } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Footer() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Cookie settings</button>
      <CookieConsent consent={{ necessary: true }} preferencesOpen={open} onPreferencesOpenChange={setOpen} onSave={() => {}} />
    </>
  );
}

AccessibilityCopy Anchor Link

• The banner is a labelled region and does not trap focus. The preferences dialog does, and returns focus to its opener.
• Every switch has a visible label and description; the required category is disabled and stays on.
• A failed save shows a message with role="alert".

RTL & i18nCopy Anchor Link

• English and Arabic are built in; pass labels to add another language or rename categories.
• Layout uses logical properties; corner cards flip with start and end. Cookie names stay left to right.

Styling & tokensCopy Anchor Link

• Built from Button, Dialog, Switch and Collapsible with --nq-* tokens only.

Do / Don'tCopy Anchor Link

• Do give Reject the same weight as Accept.
• Do keep optional categories off until the visitor turns them on.
• Don't load tracking scripts before consent, and don't reload the page to apply a choice.
• Don't hide the cookie settings link after the banner closes.

RelatedCopy Anchor Link

• dialog
• switch
• collapsible

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-website-cookie-consent--docs