Privacy banner

A cookie consent card. Customize grows it into switches, and any choice turns it into a confirmation with a drawn check. Hover the cookie for a bite.

Feedback, press, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/privacy-banner.tsx https://motion-brew.com/r/privacy-banner.tsx

One self contained file for React and Tailwind CSS: privacy-banner.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PrivacyBanner } from "@/components/privacy-banner";

export default function Consent() {
  return (
    <div className="fixed bottom-6 left-6 z-50">
      <PrivacyBanner
        onAccept={(c) => saveConsent(c)}
        onReject={(c) => saveConsent(c)}
        onSave={(c) => saveConsent(c)}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
title	string	"Cookies, your call"	Card title
description	ReactNode	a short line	Body text
kinds	{ id; label; description; required? }[]	essential, analytics, marketing	Rows under Customize
onAccept	(choices) => void		Called with every kind on
onReject	(choices) => void		Called with only the required kinds on
onSave	(choices) => void		Called with the switches as set
className	string		Placement

More feedback

Toast stack: Notifications stacked in the middle of the container.

All animated react toasts and banners