Consent Manager

Component

About

A cookie/privacy consent panel that lists granular tracking categories with per-category toggles and names who each category's data is shared with, plus equal-weight 'Reject all' / 'Accept all' / 'Save choices' actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Consent Manager to your project and fits it to your theme.

Code

How Consent Manager is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ConsentManager from "@/components/ui/consent-manager";
import { useState } from "react";

const categories = [
  {
    id: "essential",
    label: "Essential",
    description: "Keeps you signed in and remembers items in your cart.",
    required: true,
  },
  {
    id: "analytics",
    label: "Analytics",
    description: "Helps us see which pages are useful and which are not.",
    recipients: ["Fathom"],
  },
  {
    id: "personalization",
    label: "Personalization",
    description:
      "Remembers your preferences across visits, like language and layout.",
    recipients: ["Acme Preferences Service"],
  },
  {
    id: "marketing",
    label: "Marketing",
    description: "Lets us show you relevant ads for this site on other sites.",
    recipients: ["Meta Ads", "Google Ads"],
  },
];

export default function ConsentManagerDemo() {
  const [value, setValue] = useState({
    essential: true,
    analytics: true,
    personalization: false,
    marketing: false,
  });

  return (
    <div className="flex w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-md">
        <ConsentManager
          label="Cookie preferences"
          description="Choose what Acme Co. is allowed to use. Required categories keep the service working and cannot be turned off."
          categories={categories}
          value={value}
          onChange={setValue}
          onSave={(next) => {
            setValue(next);
            console.log("Saved consent choices", next);
          }}
        />
      </div>
    </div>
  );
}