# Cookie Banner

> A cookie consent banner where both answers weigh the same: Accept all and Reject all are identical buttons side by side. Customize opens the categories in place, each with a description, a switch (strictly necessary stays locked on) and its vendors under a disclosure, then Save choices. A corner card or a bottom bar that slides in with CSS. Also exports CookieSettingsButton to reopen it.

- Slug: `cookie-banner`
- Category: [Notifications](https://www.assembli.design/category/notifications.md)
- Type: component
- Tags: cookie, consent, gdpr, privacy, banner, preferences, cookie-banner, compliance
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/cookie-banner
- Page: https://www.assembli.design/components/cookie-banner

![Cookie Banner preview](https://www.assembli.design/thumbnails/cookie-banner-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"card" \| "bar"` | `"card"` | A card in the corner, or a bar across the bottom. |
| `categories` | `CookieCategory[]` | `DEFAULT_COOKIE_CATEGORIES` |  |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `true` |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `value` | `CookieConsent \| null` | `null` | The visitor's saved choice, if they made one. When the banner reopens with a saved choice (from `CookieSettingsButton`, say), it starts on the categories with their switches as saved. |
| `onConsent` | `(consent: CookieConsent, method: CookieConsentMethod) => void` |  | Store this (a cookie or your consent platform) and stop showing the banner. |
| `policyHref` | `string` |  |  |
| `title` | `React.ReactNode` | `"We value your privacy"` |  |
| `description` | `React.ReactNode` | `"We use cookies to keep the site working and, with your per…` |  |
| `strategy` | `"fixed" \| "absolute"` | `"fixed"` | `fixed` to the viewport, or `absolute` inside a positioned parent. |
| `align` | `"start" \| "end"` | `"start"` | Which corner the card sits in. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/cookie-banner/cookie-banner.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/cookie-banner
```

Registry item JSON: https://www.assembli.design/r/cookie-banner.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.