# Cookie Consent

A cookie consent banner that slides up after load, grows in place into per-category switches, remembers the visitor's choice in localStorage and reopens straight to their saved settings.

- Page and source: https://uibrik.com/components/cookie-consent
- Install: `npx shadcn@latest add https://uibrik.com/r/cookie-consent.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { CookieConsent } from "@/components/uibrik/cookie-consent/cookie-consent"`

Where to use the Cookie Consent React component:

- **Cookie banners**: A banner sliding up after load and growing into category switches covers GDPR consent. Pairs with [Checkbox](https://uibrik.com/components/checkbox).
- **Privacy settings**: Remembering the visitor's choice and reopening to saved settings saves users time.
- **Marketing opt-ins**: Per-category switches let visitors allow analytics but block ads. Pairs with [Tactile Toggles](https://uibrik.com/components/tactile-toggles).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| position | `"bottom-left" \| "bottom" \| "bottom-right"` | `"bottom-left"` | Corner of the window the card sits in. |
| title | `string` | `"We use cookies"` | Heading of the card. |
| message | `string` | `"We use cookies to keep the site working and, with your consent, to understand how it's used."` | Text under the heading. |
| policyHref | `string` | `"#"` | Link to your cookie or privacy policy. Empty to leave it out. |
| duration | `number` | `0.45` | How long the card takes to move and grow. |
| open / onOpenChange | `boolean / (open) => void` |  | Controlled visibility. Uncontrolled, the card shows itself after `delay` when no choice is saved. |
| onConsent | `(preferences: Record<string, boolean>) => void` |  | Called with every category's state once the visitor chooses. |
| categories | `{ id; label; description?; required?; defaultOn? }[]` | `Necessary, Preferences, Analytics, Marketing` | Categories in the customize view. Required ones are always on. |
| storageKey | `string \| null` | `"cookie-consent"` | localStorage key for the choice. null keeps nothing. |
| delay | `number` | `600` | Milliseconds after mount before the card shows itself. |
| strategy | `"fixed" \| "absolute"` | `"fixed"` | Pin it to the window, or to the nearest positioned parent. |
| policyLabel | `string` | `"Cookie policy"` | Text of the policy link. |
| getCookieConsent | `(storageKey?) => preferences \| null` |  | Reads the saved choice anywhere in your app, e.g. before loading analytics. |
| className | `string` |  | Classes for the card. |