Cookie 同意橫幅

每個正式網站都需要的合規元件。底部橫幅延遲滑入，提供「全部接受／全部拒絕／管理偏好」三個入口；「管理偏好」開啟置中彈窗，逐分類切換開關（必要分類鎖定為開啟），儲存後把同意物件透過 onConsent 回呼並寫入 localStorage 記憶——已有紀錄的訪客下次進站不會再被打擾。首次渲染一律不輸出，掛載後才讀取 localStorage，SSR 與 hydration 完全一致。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

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>
  );
}

安裝

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

使用

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

<CookieConsentBanner
  privacyHref="/privacy"
  onConsent={(consent, action) => {
    // 依同意結果決定是否載入分析／行銷腳本
    if (consent.analytics) {
      // initAnalytics();
    }
  }}
/>;

// 之後任何時刻都能讀回同意紀錄（例如條件式載入追蹤程式）
const stored = getStoredConsent(); // StoredConsent | null

Props

CookieCategory

CookieConsentLabels

另外具名匯出 getStoredConsent(storageKey?) 與 clearStoredConsent(storageKey?) 兩個輔助函式，以及 ConsentAction（"accept-all" \| "reject-all" \| "custom"）、StoredConsent（含 consent、action、updatedAt 三欄的儲存格式）、CookieConsentPosition 型別，方便在應用層讀取、清除與判斷同意紀錄。

細節

• 橫幅延遲約 0.6 秒才滑入——讓頁面主要內容先完成進場，同意提示不搶第一眼
• 首次渲染（含 SSR）一律不輸出任何內容，掛載後才讀取 localStorage 判斷顯示與否，避免 hydration 不一致
• localStorage 的讀寫只發生在 effect 與事件內；儲存格式為 StoredConsent JSON（同意物件、動作來源、ISO 時間），localStorage 不可用（如無痕模式）時仍照常回呼 onConsent，交由呼叫端自行儲存
• 「全部拒絕」與「儲存設定」對必要分類一律記為同意；非必要分類在彈窗中預設關閉，符合「未同意前不追蹤」原則
• container 是展示情境的逃生口：文件頁沙盒、Storybook 都能把橫幅關進固定高度的容器內；正式使用不需要傳

可及性

• 橫幅為 role="region" 並以標題命名，內含的三個動作皆為原生 button
• 偏好彈窗為 role="dialog" 加 aria-modal="true"：開啟時焦點移入彈窗、Tab 在彈窗內循環，按 Esc 或點遮罩關閉並把焦點還給「管理偏好」按鈕
• 分類開關為 role="switch" 加 aria-checked；必要分類設為 disabled 且鎖定為開啟，並以徽章標示
• 使用者系統開啟「減少動態效果」時，滑入／滑出與彈窗縮放動畫改為快速淡入淡出，功能完全不變