Cookie Banner

Cookie banner for all Uninspired products. Available as React component or HTML embed script.

Theming

Default theme:

:root {
  /* Colors */
  /* Base */
  --cb-color-neutral-0: rgb(255, 255, 255);
  --cb-color-neutral-50: rgb(250, 250, 250);
  --cb-color-neutral-100: rgb(245, 245, 245);
  --cb-color-neutral-200: rgb(229, 229, 229);
  --cb-color-neutral-300: rgb(212, 212, 212);
  --cb-color-neutral-400: rgb(163, 163, 163);
  --cb-color-neutral-500: rgb(115, 115, 115);
  --cb-color-neutral-600: rgb(82, 82, 82);
  --cb-color-neutral-700: rgb(64, 64, 64);
  --cb-color-neutral-800: rgb(38, 38, 38);
  --cb-color-neutral-900: rgb(23, 23, 23);
  --cb-color-neutral-950: rgb(10, 10, 10);

  --cb-color-brand-50: rgb(236, 253, 245);
  --cb-color-brand-100: rgb(209, 250, 229);
  --cb-color-brand-200: rgb(167, 243, 208);
  --cb-color-brand-300: rgb(110, 231, 183);
  --cb-color-brand-400: rgb(52, 211, 153);
  --cb-color-brand-500: rgb(16, 185, 129);
  --cb-color-brand-600: rgb(5, 150, 105);
  --cb-color-brand-700: rgb(4, 120, 87);
  --cb-color-brand-800: rgb(6, 95, 70);
  --cb-color-brand-900: rgb(6, 78, 59);

  --cb-space-base: 4px;
  --cb-space-xs: calc(var(--cb-space-base) * 1);
  --cb-space-sm: calc(var(--cb-space-base) * 2);
  --cb-space-md: calc(var(--cb-space-base) * 4);
  --cb-space-lg: calc(var(--cb-space-base) * 6);
  --cb-space-xl: calc(var(--cb-space-base) * 12);

  /* Typography */
  --cb-font-family-body: "Nunito Sans", sans-serif;
  --cb-font-size-body: 14px;
  --cb-font-weight-body-normal: 400;
  --cb-font-weight-body-bold: 500;
  --cb-line-height-body: 20px;
  --cb-letter-spacing-body: 0em;

  --cb-font-family-caption: "Nunito Sans", sans-serif;
  --cb-font-size-caption: 12px;
  --cb-font-weight-caption-normal: 400;
  --cb-font-weight-caption-bold: 500;
  --cb-line-height-caption: 16px;
  --cb-letter-spacing-caption: 0em;

  /* Radius */
  --cb-radius-base: 6px;
  --cb-radius-sm: calc(var(--cb-radius-base) * 1);
  --cb-radius-md: calc(var(--cb-radius-base) * 2);
  --cb-radius-lg: calc(var(--cb-radius-base) * 3);

  /* Shadow */
  --cb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --cb-shadow-md:
    0 4px 16px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.08);
  --cb-shadow-lg:
    0 12px 32px -4px rgb(0 0 0 / 0.08), 0 4px 8px -2px rgb(0 0 0 / 0.08);

  /* Sizes */
  --cb-size-banner-max-width: 448px;
  --cb-size-settings-max-height: 448px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cb-color-neutral-0: rgb(10, 10, 10);
    --cb-color-neutral-50: rgb(23, 23, 23);
    --cb-color-neutral-100: rgb(38, 38, 38);
    --cb-color-neutral-200: rgb(64, 64, 64);
    --cb-color-neutral-300: rgb(82, 82, 82);
    --cb-color-neutral-400: rgb(115, 115, 115);
    --cb-color-neutral-500: rgb(163, 163, 163);
    --cb-color-neutral-600: rgb(212, 212, 212);
    --cb-color-neutral-700: rgb(229, 229, 229);
    --cb-color-neutral-800: rgb(245, 245, 245);
    --cb-color-neutral-900: rgb(250, 250, 250);
    --cb-color-neutral-950: rgb(255, 255, 255);

    --cb-color-brand-50: rgb(15, 41, 30);
    --cb-color-brand-100: rgb(17, 49, 35);
    --cb-color-brand-200: rgb(19, 57, 41);
    --cb-color-brand-300: rgb(22, 68, 48);
    --cb-color-brand-400: rgb(27, 84, 58);
    --cb-color-brand-500: rgb(35, 110, 74);
    --cb-color-brand-600: rgb(48, 164, 108);
    --cb-color-brand-700: rgb(60, 177, 121);
    --cb-color-brand-800: rgb(76, 195, 138);
    --cb-color-brand-900: rgb(229, 251, 235);
  }
}

React component

Install

npm install @uninspired/cookie-banner

Use

import "@uninspired/cookie-banner/react/style.css";
import "@uninspired/cookie-banner/react/theme.css";
import { Banner } from "@uninspired/cookie-banner/react";

function App() {
  return <Banner noTarget items={[]} />;
}

Embed script

Add this to the document head:

<link
  rel="stylesheet"
  href="https://esm.sh/@uninspired/cookie-banner/script/theme.css"
/>
<link
  rel="stylesheet"
  href="https://esm.sh/@uninspired/cookie-banner/script/style.css"
/>

Add this to the end of the document body:

<script type="module" async defer>
  import { mountBanner } from "https://esm.sh/@uninspired/cookie-banner/script/index.js";
  mountBanner({
    cookie: {
      domain: ".uninspired.studio",
      sameSite: "strict",
      secure: true,
    },
    items: [
      {
        value: "functional",
        label: "Functional",
        sublabel: "The site would break if you disabled these.",
        required: true,
        description: `<b>Authentication</b><br/>
                    <p>Keeps you logged into your account across sessions. These cookies are essential for the app to work correctly and cannot be disabled.</p>
                    <b>Payments</b><br/>
                    <p>Required to process purchases and manage your subscription. Used by Paddle to handle transactions, tax calculation, and order management. These cannot be disabled as they're essential to completing and maintaining purchases.</p><b>Referral Tracking</b><br/>
      <p>Ensures visits and sign-ups via our referral program are attributed correctly. Used by Tolt to credit partners or affiliates when you arrive through a referral link.</p>`,
        scripts: [],
      },
      {
        value: "analytics",
        label: "Analytics",
        sublabel: "Help us make our products better.",
        defaultSelected: true,
        description: `<b>Web & Product Analytics</b><br/>
            <p>Helps us understand how visitors navigate the site and how customers interact with the product — including page views, feature usage, and session flows. Used by PostHog to improve the experience and inform what gets built next.</p>
            <b>Error Tracking</b><br/>
            <p>Captures technical errors and crashes to help us diagnose and resolve bugs quickly. Used by PostHog to collect error context without storing personally identifiable information.</p>`,
        scripts: [
          {
            id: "web-analytics",
            variant: "inline",
            type: "text/javascript",
            content: `console.log('analytics');`,
            defer: true,
            async: true,
          },
        ],
      },
      {
        value: "marketing",
        label: "Marketing",
        defaultSelected: true,
        sublabel: "Help us measure the effectiveness of our marketing.",
        description: `<b>Conversion Tracking</b><br/>
            <p>Tracks actions taken after interacting with our ads, such as visiting a page or starting a trial. Used by Meta Pixel to measure campaign effectiveness and avoid spending budget on underperforming ads.</p>`,
        scripts: [
          {
            id: "log",
            variant: "inline",
            type: "text/javascript",
            content: "console.log('marketing');",
            defer: true,
            async: true,
          },
        ],
      },
    ],
  });
</script>