coinbase · xtbase · Jul 23, 2025
diff --git a/apps/example/pages/_app.tsx → apps/example/app/RootProviders.tsx b/apps/example/pages/_app.tsx → apps/example/app/RootProviders.tsx
@@ -1,13 +1,10 @@
 'use client';
-import '@/styles/globals.css';
-
 import { Provider, Region, TrackingCategory, TrackingPreference } from '@coinbase/cookie-manager';
-import type { AppProps } from 'next/app';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { cookieManagerConfig } from '../utils/cookieManagerConfig';
+import { cookieManagerConfig } from '@/utils/cookieManagerConfig';
 
-export default function App({ Component, pageProps }: AppProps) {
+export const RootProviders = ({ children }: { children: React.ReactNode }) => {
   const [isMounted, setIsMounted] = useState(false);
   const trackingPreference = useRef<TrackingPreference | undefined>();
 
@@ -52,7 +49,7 @@ export default function App({ Component, pageProps }: AppProps) {
       log={console.log}
       onPreferenceChange={setTrackingPreference}
     >
-      <Component {...pageProps} />
+      {children}
     </Provider>
   );
-}
+};
diff --git a/apps/example/app/layout.tsx b/apps/example/app/layout.tsx
@@ -0,0 +1,84 @@
+import '@/styles/globals.css';
+
+import { Inter } from 'next/font/google';
+import localFont from 'next/font/local';
+
+import { RootProviders } from '@/app/RootProviders';
+
+const coinbaseSans = localFont({
+  src: [
+    {
+      path: '../fonts/base-sans/BaseSans-Thin.woff2',
+      weight: '100',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-ThinItalic.woff2',
+      weight: '100',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-Light.woff2',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-LightItalic.woff2',
+      weight: '300',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-Italic.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-MediumItalic.woff2',
+      weight: '500',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-BoldItalic.woff2',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-Black.woff2',
+      weight: '900',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/base-sans/BaseSans-BlackItalic.woff2',
+      weight: '900',
+      style: 'italic',
+    },
+  ],
+  variable: '--font-coinbase-sans',
+});
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body className={`${coinbaseSans.variable} ${inter.className}`}>
+        <RootProviders>{children}</RootProviders>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/example/app/page.tsx b/apps/example/app/page.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { CookieBanner } from '@coinbase/cookie-banner';
+import { useCookie } from '@coinbase/cookie-manager';
+import { useEffect } from 'react';
+
+import useTranslations from '@/hooks/useTranslations';
+const cookieBannerTheme = {
+  colors: {
+    primary: '#1652F0',
+    positive: '#05B169',
+    negative: '#DF5F67',
+    warning: '#F4C622',
+    background: '#ffffff',
+    backgroundMuted: '#ffffff',
+    onBackground: 'rgba(0,0,0)',
+    onBackgroundMuted: 'rgba(0,0,0,0.5)',
+    onPrimary: '#FFFFFF',
+    overlay: 'rgba(17,52,83,0.6)',
+  },
+  border: {
+    border: '1px solid #D8D8D8',
+    borderRadius: '4px',
+  },
+  fontSize: {
+    sm: '14px',
+    md: '16px',
+  },
+  lineHeight: {
+    sm: '16px',
+    md: '24px',
+  },
+  fontWeight: {
+    regular: '400',
+    bold: '500',
+  },
+  size: {
+    xs: '8px',
+    sm: '16px',
+    md: '24px',
+    lg: '32px',
+  },
+  breakpoints: {
+    phone: 560,
+    desktop: 992,
+    tablet: 768,
+  },
+  zIndex: {
+    hidden: 0,
+    normal: 1,
+    elevated: 2,
+    high: 2,
+    extraHigh: 3,
+    backdrop: 999,
+    overlay: 1000,
+    top: 1001,
+  },
+  gutters: {
+    horizontal: {
+      sm: '10px',
+      md: '20px',
+    },
+    vertical: {
+      sm: '10px',
+      md: '10px',
+    },
+  },
+};
+
+export default function Home() {
+  const [, setIpCountryCookie] = useCookie('ip_country');
+  const [, setLocaleCookie] = useCookie('locale');
+  const [, setRFMCookie] = useCookie('rfm');
+  const [trackingPreference] = useCookie('cm_eu_preference');
+
+  useEffect(() => {
+    setIpCountryCookie('US');
+    setRFMCookie('locale');
+    setLocaleCookie('en');
+  }, [setIpCountryCookie, setLocaleCookie, setRFMCookie, trackingPreference]);
+
+  return (
+    <main className={`flex min-h-screen bg-black justify-end flex-col`}>
+      <CookieBanner
+        link={'https://www.coinbase.com/legal/cookie'}
+        useTranslations={useTranslations}
+        companyName={'Coinbase'}
+        theme={cookieBannerTheme}
+        classNames={{
+          banner: {
+            container: 'leading-[16px] font-sans tracking-[0.14px]',
+            secondaryCta:
+              '!rounded-[8px] !border-[rgba(10,11,13,0.2)] !border-[1px] !border !border-solid !text-black !py-2.5 !px-4 md:!border-none hover:!text-gray-90 transition-colors',
+            primaryCta:
+              '!rounded-[8px] !bg-[#0A0B0D] !text-base-white hover:!bg-base-blue !py-2.5 !px-4 transition-colors !border-transparent',
+            cookieLink: '!text-[#0A0B0D]',
+          },
+          modal: {
+            container: 'leading-[16px] font-sans',
+            primaryCta:
+              '!rounded-[8px] !bg-base-black !text-base-white hover:!bg-base-blue !py-2.5 !px-4 transition-colors',
+          },
+        }}
+      />
+    </main>
+  );
+}
diff --git a/apps/example/fonts/base-sans/BaseSans-Black.woff2 b/apps/example/fonts/base-sans/BaseSans-Black.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-BlackItalic.woff2 b/apps/example/fonts/base-sans/BaseSans-BlackItalic.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-Bold.woff2 b/apps/example/fonts/base-sans/BaseSans-Bold.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-BoldItalic.woff2 b/apps/example/fonts/base-sans/BaseSans-BoldItalic.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-Italic.woff2 b/apps/example/fonts/base-sans/BaseSans-Italic.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-Light.woff2 b/apps/example/fonts/base-sans/BaseSans-Light.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-LightItalic.woff2 b/apps/example/fonts/base-sans/BaseSans-LightItalic.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-Medium.woff2 b/apps/example/fonts/base-sans/BaseSans-Medium.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-MediumItalic.woff2 b/apps/example/fonts/base-sans/BaseSans-MediumItalic.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-Regular.woff2 b/apps/example/fonts/base-sans/BaseSans-Regular.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-Thin.woff2 b/apps/example/fonts/base-sans/BaseSans-Thin.woff2
diff --git a/apps/example/fonts/base-sans/BaseSans-ThinItalic.woff2 b/apps/example/fonts/base-sans/BaseSans-ThinItalic.woff2
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -11,8 +11,8 @@
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
-    "@coinbase/cookie-banner": "1.0.4",
-    "@coinbase/cookie-manager": "1.1.8",
+    "@coinbase/cookie-banner": "^1.0.4",
+    "@coinbase/cookie-manager": "^1.1.8",
     "next": "14.1.1",
     "react": "^18",
     "react-dom": "^18"

diff --git a/apps/example/pages/_document.tsx b/apps/example/pages/_document.tsx
diff --git a/apps/example/pages/api/hello.ts b/apps/example/pages/api/hello.ts
diff --git a/apps/example/pages/index.tsx b/apps/example/pages/index.tsx
diff --git a/apps/example/tailwind.config.ts b/apps/example/tailwind.config.ts
@@ -12,6 +12,31 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      fontFamily: {
+        sans: ['var(--font-coinbase-sans)'],
+      },
+      colors: {
+        base: {
+          white: 'rgba(255, 255, 255, 1)',
+          black: 'rgb(50, 50, 50, 1)',
+          blackInvert: 'rgb(205, 205, 205, 1)',
+          gray: {
+            10: 'rgb(238, 240, 243)',
+            25: 'rgba(250, 250, 250, 1)',
+            30: 'rgba(247, 247, 247, 1)',
+            50: 'rgba(242, 242, 242, 1)',
+            100: 'rgba(217, 217, 227, 1)',
+            150: 'rgba(177, 183, 195, 1)',
+            200: 'rgba(113, 120, 134, 1)',
+          },
+          blue: 'rgba(0, 0, 255, 1)',
+          blueDark: '#7575FF',
+          yellow: 'rgba(255, 210, 0, 1)',
+          green: 'rgba(182, 245, 105, 1)',
+          pink: 'rgba(254, 168, 205, 1)',
+          'light-blue': 'rgba(60, 138, 255, 1)',
+        },
+      },
     },
   },
   plugins: [],

diff --git a/apps/example/tsconfig.json b/apps/example/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -14,9 +18,23 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/package.json b/package.json
@@ -27,5 +27,6 @@
     "eslint-plugin-unused-imports": "^3.0.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/packages/cookie-banner/CHANGELOG.md b/packages/cookie-banner/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.5 (23/07/2025)
+
+- Updating theming options and adding support for classnames for more flexibility in styling. Updated overall style slightly to include a header for mobile
+
 ## 1.0.4 (03/07/2024)
 
 #### Bug

diff --git a/packages/cookie-banner/package.json b/packages/cookie-banner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cookie-banner",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {