Cookie Consent

New

A banner or corner card that slides in with one click accept and reject. Customize opens per category switches, and the choice goes to a callback.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Acme Bakery

No choice yet

Installation

$ pnpm dlx shadcn@latest add @soultel/cookie-consent

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/cookie-consent.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/cookie-consent.tsx.

Usage

example.tsx16 lines

import { CookieConsent } from "@/components/cookie-consent"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <CookieConsent
        storageKey="acme-consent"
        policyHref="/cookies"
        onConsent={(prefs) => {
          if (prefs.analytics) loadAnalytics()
        }}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
onConsent	(preferences, method: "accept-all" \| "reject-all" \| "custom") => void	-	Receives a record of category id to boolean.
categories	CookieCategory[]	defaultCookieCategories	id, label, description, required, defaultEnabled.
storageKey	string	-	Save the choice to localStorage and stay hidden once answered. Off by default.
open / defaultOpen / onOpenChange	boolean	true	Controlled or initial visibility. Reopen it from a footer link.
variant	"card" \| "banner"	"card"	Corner card or full width bar.
delay	number	400	Wait before sliding in, in ms.
policyHref / policyLabel	string	-	Link to your cookie policy.
className	string	-	Positioning. "absolute" keeps it inside a relative parent.