Cookie Consent React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Cookie Consent is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CookieConsent from @/components/ui/cookie-consent.

import type { ReactNode } from "react"
import { ConsentGate, CookieConsent, CookieSettingsLink } from "@/components/ui/cookie-consent"

export function SiteShell({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <ConsentGate category="marketing" className="aspect-video">
        <iframe title="Acme CRM overview" src="https://www.youtube-nocookie.com/embed/abc123" className="aspect-video w-full rounded-2xl" />
      </ConsentGate>
      <footer>
        <CookieSettingsLink />
      </footer>
      <CookieConsent
        policyHref="/cookie-policy"
        delay={500}
        onDecide={(record) => {
          if (record.choices.analytics) console.log("load analytics")
        }}
      />
    </>
  )
}

Props

• titledefault ""
  ReactNode

  The heading. Empty uses labels.title ("We use cookies" by default).

• descriptiondefault ""
  ReactNode

  The text under the heading. Empty uses labels.description; the policy link follows it.

• policyHrefdefault ""
  string

  The cookie policy URL, shown as an underlined link after the description. Empty hides the link.

• icon
  ReactNode | false

  A cookie in a 40px tinted tile by default; pass your own icon, or false to hide it.

• categories
  ConsentCategoryConfig[]

  { id, label, description?, required?, cookies?: { name, provider?, duration?, purpose? }[] }[]. Display order; necessary (or any required) is locked on. Default DEFAULT_CONSENT_CATEGORY_CONFIG (English), or CONSENT_CATEGORY_CONFIG_RO.

• labels
  Partial<CookieConsentLabels>

  Every string: region, title, description, policy, acceptAll, rejectAll, settings, settingsTitle, settingsDescription, save, alwaysOn, showCookies(count), hideCookies, cookieName, provider, duration, purpose, saved, gateTitle(category), gateDescription, gateAllow, close. English by default; pass COOKIE_CONSENT_LABELS_RO for the ready Romanian copy.

• variantdefault "bar"
  "bar" | "card"

  bar: a full-width glass bar at the bottom (a card-like sheet on phones). card: a 400px floating card.

• positiondefault "bottom"
  "bottom" | "bottom-start" | "bottom-end"

  Where the card floats (centered, start or end corner); for the bar, where its content column sits on wide screens. Unset, the bar uses bottom and the card bottom-start.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The Accept button, the switches and the icon tile. Reject keeps the neutral soft look at the same size, so both choices weigh the same.

• colordefault ""
  string

  Any CSS color; replaces the tone on the Accept button, the switches and the icon tile.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape of the buttons, scaled per size like the button's (the 48px phone buttons take the lg step).

• showRejectdefault true
  boolean

  Reject all next to Accept all, as easy as accepting. Keep it on in the EU.

• showSettingsdefault true
  boolean

  The Settings button that opens the per-category panel.

• defaultOpendefault false
  boolean

  Shows the bar on mount even when the visitor already chose. Unset, the bar shows exactly while the visitor has not decided. Controlled with open / onOpenChange.

• open
  boolean

  Controls the bar's visibility (previews, a consent page). onOpenChange(false) fires when a choice hides it.

• onOpenChange
  (open: boolean) => void

  Called when a choice hides the bar.

• defaultSettingsOpendefault false
  boolean

  Opens the settings panel on mount. Controlled with settingsOpen / onSettingsOpenChange; openConsentSettings() opens it from anywhere.

• settingsOpen
  boolean

  Controls the settings panel.

• onSettingsOpenChange
  (open: boolean) => void

  Called when the settings panel opens or closes.

• blockingdefault false
  boolean

  Dims the page and traps focus until a choice (role dialog, focus on Reject all, Escape does nothing). Non-blocking is the default and the usual advice; use this only where legally advised.

• delaydefault 0
  number

  Milliseconds after hydration before the bar shows, so the page paints first. The bar is fixed, so it never shifts the layout.

• storageKeydefault "ui-consent"
  string

  Cookie / storage key of the record, passed to useConsent. Every consent hook, gate and link with the same key shares it.

• versiondefault 1
  number

  The policy version. Bump it when the policy or the categories change: older choices count as undecided and the bar returns.

• storagedefault "cookie"
  "cookie" | "local" | "session"

  Where the record lives. A cookie can be read on the server too. When storage is blocked the choice lives in memory for the session.

• maxAgeDaysdefault 180
  number

  How long a cookie choice is kept before the visitor is asked again.

• responsivedefault true
  boolean

  Settings as a full-height bottom sheet below 768px (a dialog otherwise).

• portaldefault true
  boolean

  Renders the region as the first child of document.body (or container), so keyboard and screen reader users reach it before the page. false renders it in place with absolute instead of fixed (previews, a phone frame, docs).

• container
  HTMLElement | null

  The portal target instead of document.body. A container with contain: layout or a transform keeps the fixed bar inside it.

• onDecide
  (record: ConsentRecord) => void

  After every decision (accept, reject, save): { version, choices, decidedAt, method }. Load scripts here, or use onConsentChange from use-consent.

• classNames
  Partial<Record<"overlay" | "inner" | "icon" | "content" | "title" | "description" | "policy" | "actions" | "button" | "settings" | "category" | "cookies" | "cookie", string>>

  Extra classes for the inner parts; settings is the dialog / sheet content (the data-slot cookie-consent-settings marks the category list inside it).

• className
  string

  Extra classes for the bar or card itself, merged last.

Parts

FAQ

Used in

More React feedback components