Source: https://www.hype-stack.dev/docs/packs-templates/packs/pack-cookies

# Cookie Consent

A cookie consent banner and a preferences modal, built on
[vanilla-cookieconsent](https://github.com/orestbida/cookieconsent) and themed to your tokens. This is the
`pack-cookies` pack, and it is free.

## No special integration needed

Frontend only. No backend files, no Prisma models, no environment variables, no third-party account. It does not even
need a starter: it is the one feature pack with no capability requirements, so it installs on the bare template.

## What you get

- A consent banner on first visit, with accept, reject, and manage buttons.
- A preferences modal with per-category toggles (necessary, analytics, marketing), reachable again through the
  `CookieConsentAction` button you can place in a footer or settings page.
- Revocable consent. Users can change their mind and the change fires the same events.
- Script gating: your analytics or marketing tags subscribe to consent events and only load once allowed.
- Styling from your semantic theme tokens, so it matches the rest of the app in light and dark mode.
- Every string in the message catalog, so it translates with everything else.

## How it mounts

The pack adds a `CookieConsentProvider` to the app's root providers through the manifest's `providers` field. Nothing
else in your tree changes. Choices persist in a first-party `cc_cookie`, and vanilla-cookieconsent fires `cc:onConsent`
and `cc:onChange` on `window`, which is how you gate a script:

```ts
import * as CookieConsent from "vanilla-cookieconsent";

window.addEventListener("cc:onConsent", () => {
  if (CookieConsent.acceptedCategory("analytics")) {
    // load your analytics client here
  }
});
```

The category ids live in `COOKIE_CATEGORIES` next to the config, so a typo is a type error.

## Environment variables

None.