Cookie Consent
A calm, trustworthy cookie choice card and floating trigger that stores nothing itself. Designed to look at home on any site in light or dark mode. This component shows the choices and reports them. It stores nothing. Your app must store the choice and block non-essential scripts until they are allowed. A banner alone does not make a site compliant.
Dependencies
motionlucide-reactclsxtailwind-merge
Interaction
AnimatePresence card-to-button morphing capsule with anchored transform origin, spring-settling switches, and direct onSave reporting.
Props
| Prop | Type | Description |
|---|---|---|
| categories | CookieCategory[] | Array of consent categories with id, label, description, and optional required flag. |
| value | Record<string, boolean> | Controlled consent choices mapping category id to boolean state. |
| defaultValue | Record<string, boolean> | Initial uncontrolled consent choices. |
| onSave | (choices: Record<string, boolean>) => void | Fired when the user confirms their choices through Accept all, Reject all, or Save choices. |
| defaultView | "banner" | "button" | Initial display view. Use button for sites where consent was previously recorded. |
| title | string | Heading text displayed on the banner view. |
| description | string | Body copy explaining cookie usage on the banner view. |
| policyHref | string | Optional URL for the cookie policy link. |
| placement | "bottom-left" | "bottom-right" | "bottom-center" | Viewport screen anchor corner or center edge. |
| fixed | boolean | Whether the container uses fixed or absolute positioning. |
| className | string | Optional additional CSS class names for the outer container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.