Cookie Banner

The CookiePanel is a compact, bottom‑right floating cookie consent banner built with Next.js, TypeScript, TailwindCSS v4, and Lucide icons. It presents users with a clear cookie policy message, quick Accept all and Customize actions, and theme‑aware styling. Clicking Customize smoothly expands an inline preferences panel inside the toast, letting users toggle cookie categories without leaving the page. Preferences are saved to localStorage and the banner closes automatically upon saving, ensuring a clean, interruption‑free user experience. Built‑in slide/fade animations are handled purely with Tailwind’s tw-animate-css utilities for a lightweight, modern feel.

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

import { CookiePanel } from "@/components/ui/cookie-banner-1";

export default function DemoCookiePanel() {
  return (
    <main className="min-h-screen grid place-items-center bg-background text-foreground p-8">
      <div className="m-auto max-w-xl text-center">
        <h1 className="text-2xl font-semibold mb-2">Cookie Panel — Toast with Preferences</h1>

        <p className="text-muted-foreground mb-8">
          This demo shows the compact, bottom‑right floating cookie banner. 
          Click <strong>Customize</strong> to expand and adjust your cookie preferences inline — no modal needed.
        </p>
      </div>

      <CookiePanel />
    </main>
  );
}