PolicyStack

https://www.policystack.dev/docs
Admin
PolicyStack is a set of open-source primitives for privacy and consent. The documentation here...
Tokens:26,941
Snippets:310
Trust Score:4.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install @policystack/core

Source: https://www.policystack.dev/docs/consent/core

Install the core consent package using bun.

```sh
bun add @policystack/core
```

--------------------------------

### Install @policystack/core and @policystack/react

Source: https://www.policystack.dev/docs/consent/react

Install the core consent library and the React adapter using bun.

```sh
bun add @policystack/core @policystack/react
```

--------------------------------

### Install @policystack/core and @policystack/svelte

Source: https://www.policystack.dev/docs/consent/svelte

Install the necessary core and Svelte packages using bun.

```sh
bun add @policystack/core @policystack/svelte
```

--------------------------------

### Install @policystack/svelte and @policystack/sdk

Source: https://www.policystack.dev/docs/policy/svelte

Install the necessary packages for the Svelte adapter and SDK using Bun.

```sh
bun add @policystack/svelte @policystack/sdk
```

--------------------------------

### Install Policystack CLI

Source: https://www.policystack.dev/docs/policy/configuration

Use the Policystack CLI to initialize your project, which installs the SDK and scaffolds a starter config.

```sh
bunx @policystack/cli init
```

--------------------------------

### Install @policystack/scripts

Source: https://www.policystack.dev/docs/consent/scripts

Install the core and scripts packages using npm.

```sh
npm install @policystack/core @policystack/scripts
```

--------------------------------

### Install @policystack/cli

Source: https://www.policystack.dev/docs/consent/cli

Install the @policystack/cli package as a development dependency using Bun.

```sh
bun add -D @policystack/cli
```

--------------------------------

### Install @policystack/core and @policystack/solid

Source: https://www.policystack.dev/docs/consent/solid

Install the necessary packages for the Solid adapter and core consent functionality.

```sh
bun add @policystack/core @policystack/solid
```

--------------------------------

### Install @policystack/core and @policystack/angular

Source: https://www.policystack.dev/docs/consent/angular

Install the core consent package and the Angular adapter using pnpm.

```sh
pnpm add @policystack/core @policystack/angular
```

--------------------------------

### Install Cookie Policy Component with shadcn

Source: https://www.policystack.dev/docs/policy/policies/quick-start

Use this command to install the ready-to-use Cookie Policy component from the Policy shadcn registry. This command also installs a base renderer and starter config.

```sh
bunx shadcn@latest add @policystack/cookie-policy
```

--------------------------------

### Install @policystack/vite

Source: https://www.policystack.dev/docs/consent/vite

Install the @policystack/vite package as a development dependency.

```sh
bun add -D @policystack/vite
```

--------------------------------

### Install Policystack Core and Framework Packages

Source: https://www.policystack.dev/docs/consent

Install the core package along with the framework-specific package for React, Vue, Solid, Svelte, or Angular.

```sh
# React
npm install @policystack/core @policystack/react

# Vue
npm install @policystack/core @policystack/vue

# Solid
npm install @policystack/core @policystack/solid

# Svelte
npm install @policystack/core @policystack/svelte

# Angular
npm install @policystack/core @policystack/angular
```

--------------------------------

### Install @policystack/react and @policystack/sdk

Source: https://www.policystack.dev/docs/policy/react

Install the necessary packages for the React adapter and SDK. Ensure you have React version 18 or higher as a peer dependency.

```sh
bun add @policystack/react @policystack/sdk
```

--------------------------------

### Wrap App with PolicyStack Provider

Source: https://www.policystack.dev/docs/policy/policies/quick-start

Wrap your application with the PolicyStack provider, passing the starter config. This setup is required after installing policy components using shadcn.

```tsx
import { PolicyStack } from "@policystack/react/provider";
import policy from "@/policy";

export default function RootLayout({ children }) {
	return <PolicyStack config={policy}>{children}</PolicyStack>;
}
```

--------------------------------

### Initialize Policy CLI

Source: https://www.policystack.dev/docs/policy/cli

Run the Policy CLI initialization command from your project root. This command installs dependencies, scaffolds configuration, and generates an agent prompt.

```sh
bunx @policystack/cli init
```

```sh
npx @policystack/cli init
```

```sh
pnpm dlx @policystack/cli init
```

--------------------------------

### Install Policystack SDK Manually

Source: https://www.policystack.dev/docs/policy/configuration

Alternatively, install the `@policystack/sdk` package manually using your package manager.

```sh
bun add @policystack/sdk
```

--------------------------------

### Setup (Svelte 5 runes)

Source: https://www.policystack.dev/docs/consent/svelte

Call `setPolicyStackConsentContext` once in a root component to initialize the consent context. You can pass configuration directly or a pre-created store.

```APIDOC
## Setup (Svelte 5 runes)

Call `setPolicyStackConsentContext` once in a root component (e.g., `+layout.svelte` for SvelteKit):

```svelte
<script lang="ts">
  import { setPolicyStackConsentContext } from "@policystack/svelte/consent";
  import type { Category } from "@policystack/core/consent";

  const categories: Category[] = [
    { key: "essential", label: "Essential", locked: true },
    { key: "analytics", label: "Analytics" },
    { key: "marketing", label: "Marketing" },
  ];

  setPolicyStackConsentContext({ config: { categories } });

  let { children } = $props();
</script>

{@render children?.()}
```

You can pass a pre-created store with `setPolicyStackConsentContext({ store })` instead.
```

--------------------------------

### Install @policystack/core and @policystack/vue

Source: https://www.policystack.dev/docs/consent/vue

Install the core consent library and the Vue 3 adapter. Peer dependency: vue >= 3.4.

```sh
bun add @policystack/core @policystack/vue
```

--------------------------------

### Install @policystack/vue and @policystack/sdk

Source: https://www.policystack.dev/docs/policy/vue

Install the necessary packages for the Vue adapter and SDK. Ensure Vue version 3 or higher is used as a peer dependency.

```sh
bun add @policystack/vue @policystack/sdk
```

--------------------------------

### Install Privacy Policy Component with shadcn

Source: https://www.policystack.dev/docs/policy/policies/quick-start

Use this command to install the ready-to-use Privacy Policy component from the Policy shadcn registry. This command also installs a base renderer and starter config.

```sh
bunx shadcn@latest add @policystack/privacy-policy
```

--------------------------------

### useConsent()

Source: https://www.policystack.dev/docs/consent/vue

Returns reactive refs for the current consent state plus action methods. Use it inside `setup()` or any `<script setup>` block.

```APIDOC
## useConsent()

### Description
Returns reactive refs for the current consent state plus action methods. Use it inside `setup()` or any `<script setup>` block.

### Usage
```vue
<script setup lang="ts">
import { useConsent } from "@policystack/vue/consent";

const { route, decisions, acceptAll, acceptNecessary, setRoute } = useConsent();
</script>

<template>
	<div v-if="route === 'cookie'">
		<button @click="acceptNecessary">Necessary only</button>
		<button @click="acceptAll">Accept all</button>
		<button @click="setRoute('preferences')">Customize</button>
	</div>
</template>
```

### Returns
- `route` (string): The current consent route.
- `decisions` (object): An object containing consent decisions.
- `acceptAll` (function): Function to accept all consent categories.
- `acceptNecessary` (function): Function to accept only necessary consent categories.
- `setRoute` (function): Function to set the current consent route.
```

--------------------------------

### SvelteKit SSR Consent Setup

Source: https://www.policystack.dev/docs/consent/svelte

Initialize the consent context in your root SvelteKit layout file using setPolicyStackConsentContext. This ensures safe hydration.

```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { setPolicyStackConsentContext } from "@policystack/svelte/consent";
  import { categories } from "$lib/cookies";

  setPolicyStackConsentContext({ config: { categories } });

  let { children } = $props();
</script>

{@render children()}

```

--------------------------------

### Setup PolicyStack Provider in Solid App

Source: https://www.policystack.dev/docs/consent/solid

Wrap your Solid application with the PolicyStack provider, passing your policystack.ts configuration.

```tsx
import { PolicyStack } from "@policystack/solid/consent";
import { render } from "solid-js/web";
import config from "./policystack";

render(
	() => (
		<PolicyStack config={config}>
			<App />
		</PolicyStack>
	),
	document.getElementById("root")!,
);

```

--------------------------------

### Install Policy Skill Pack in Claude Code

Source: https://www.policystack.dev/docs/policy/agent-skills

Use these commands to add and install the Policy skill pack from the marketplace within Claude Code. The skills activate automatically when a matching task is encountered.

```bash
/plugin marketplace add jamiedavenport/policystack
/plugin install policystack
```

--------------------------------

### Use useConsent composable in Vue

Source: https://www.policystack.dev/docs/consent/vue

Access reactive consent state and action methods like acceptAll, acceptNecessary, and setRoute. Use within setup() or <script setup>.

```vue
<script setup lang="ts">
import { useConsent } from "@policystack/vue/consent";

const { route, decisions, acceptAll, acceptNecessary, setRoute } = useConsent();
</script>

<template>
	<div v-if="route === 'cookie'">
		<button @click="acceptNecessary">Necessary only</button>
		<button @click="acceptAll">Accept all</button>
		<button @click="setRoute('preferences')">Customize</button>
	</div>
</template>
```

--------------------------------

### Setup PolicyStack Vite Plugin

Source: https://www.policystack.dev/docs/policy/policies/auto-collect

Add the `policyStack()` plugin to your Vite configuration to enable auto-collection during the build process.

```ts
import { defineConfig } from "vite";
import { policyStack } from "@policystack/vite";

export default defineConfig({
	plugins: [policyStack()],
});
```

--------------------------------

### Setup PolicyStack Provider in RootLayout

Source: https://www.policystack.dev/docs/policy/react

Wrap your application with the PolicyStack provider to supply policy context and consent store. Pass your entire policystack.ts config to the provider.

```tsx
import { PolicyStack } from "@policystack/react/provider";
import policy from "@/policystack";

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return <PolicyStack config={policy}>{children}</PolicyStack>;
}
```

--------------------------------

### Setup PolicyStack Provider in SolidStart App (SSR)

Source: https://www.policystack.dev/docs/consent/solid

Integrate the PolicyStack provider into the root of your SolidStart application for server-side rendering.

```tsx
// src/app.tsx
import { PolicyStack } from "@policystack/solid/consent";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import config from "./policystack";

export default function App() {
	return (
		<PolicyStack config={config}>
			<Router>
				<FileRoutes />
			</Router>
		</PolicyStack>
	);
}

```

--------------------------------

### Provide PolicyStack Consent at Root

Source: https://www.policystack.dev/docs/consent/angular

Register the providePolicyStackConsent provider once at the root of your standalone Angular application. This setup configures consent categories and specifies the storage adapter.

```ts
import { bootstrapApplication } from "@angular/platform-browser";
import { providePolicyStackConsent } from "@policystack/angular/consent";
import { localStorageAdapter } from "@policystack/core/consent/storage/local-storage";
import { AppComponent } from "./app.component";

bootstrapApplication(AppComponent, {
	providers: [
		providePolicyStackConsent({
			config: {
				categories: [
					{ key: "essential", label: "Essential", locked: true },
					{ key: "analytics", label: "Analytics" },
					{ key: "marketing", label: "Marketing" },
				],
				adapter: localStorageAdapter(),
			},
		}),
	],
});
```

--------------------------------

### Setup PolicyStack Provider in Vue App

Source: https://www.policystack.dev/docs/consent/vue

Wrap your Vue app with the PolicyStack provider, passing your policystack.ts configuration. This supplies both policy context and the consent store.

```vue
<script setup lang="ts">
import { PolicyStack } from "@policystack/vue/provider";
import config from "./policystack";
</script>

<template>
	<PolicyStack :config="config">
		<App />
	</PolicyStack>
</template>
```

--------------------------------

### Next.js Root Layout Setup

Source: https://www.policystack.dev/docs/consent/react

Integrate the PolicyStack provider into your Next.js application's root layout for SSR compatibility. Ensure the provider is a client component.

```tsx
// app/providers.tsx
"use client";
import { PolicyStack } from "@policystack/react/provider";
import config from "../policystack";

export function Providers({ children }: { children: React.ReactNode }) {
	return <PolicyStack config={config}>{children}</PolicyStack>;
}

```

```tsx
// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html>
			<body>
				<Providers>{children}</Providers>
			</body>
		</html>
	);
}

```

--------------------------------

### Setup Consent Context in Svelte 5 Runes

Source: https://www.policystack.dev/docs/consent/svelte

Call setPolicyStackConsentContext once in a root component to initialize the consent context with categories. This is typically done in a SvelteKit layout file.

```svelte
<script lang="ts">
  import { setPolicyStackConsentContext } from "@policystack/svelte/consent";
  import type { Category } from "@policystack/core/consent";

  const categories: Category[] = [
    { key: "essential", label: "Essential", locked: true },
    { key: "analytics", label: "Analytics" },
    { key: "marketing", label: "Marketing" },
  ];

  setPolicyStackConsentContext({ config: { categories } });

  let { children } = $props();
</script>

{@render children?.()}

```

--------------------------------

### Configure Re-consent Triggers

Source: https://www.policystack.dev/docs/consent/core

Set up triggers to re-prompt users for consent when policy changes, categories are added, jurisdiction differs, or the record expires. This example shows how to configure these triggers within the `createConsentStore` function.

```typescript
const store = createConsentStore({
	categories,
	policyVersion: "v2",
	adapter: cookieAdapter(),
	triggers: {
		policyVersionChanged: true, // config.policyVersion !== record.policyVersion
		categoriesAdded: true, // a category in config is missing from the record
		expiresAfter: "13 months", // older than the duration → re-prompt
		jurisdictionChanged: true, // current jurisdiction differs from the recorded one
	},
});
```

--------------------------------

### Nuxt 3 App Setup with PolicyStack Provider

Source: https://www.policystack.dev/docs/consent/vue

Integrate the PolicyStack provider in Nuxt 3 by wrapping the app, typically in app.vue, to provide consent management across the application.

```vue
<!-- app.vue -->
<script setup lang="ts">
import { PolicyStack } from "@policystack/vue/provider";
import config from "./policystack";
</script>

<template>
	<PolicyStack :config="config">
		<NuxtLayout>
			<NuxtPage />
		</NuxtLayout>
	</PolicyStack>
</template>
```

--------------------------------

### Setup PolicyStack Provider in Svelte App

Source: https://www.policystack.dev/docs/policy/svelte

Wrap your Svelte application with the PolicyStack provider to manage policy context and consent store. Ensure your policystack.ts config is imported correctly.

```svelte
<script lang="ts">
	import { PolicyStack } from "@policystack/svelte/policy";
	import policy from "$lib/policystack";
	let { children } = $props();
</script>

<PolicyStack config={policy}>
	{@render children()}
</PolicyStack>
```

--------------------------------

### Get Granular Category Consent in Svelte

Source: https://www.policystack.dev/docs/consent/svelte

Use getCategory(key) for per-category consent management. This allows direct access to a category's granted status and toggle functionality.

```svelte
<script lang="ts">
  import { getCategory } from "@policystack/svelte/consent";

  const analytics = getCategory("analytics");
</script>

<label>
  <input type="checkbox" checked={analytics.granted} onchange={analytics.toggle} />
  Analytics
</label>

```

--------------------------------

### Manual Integration with PolicyStack Provider and Components

Source: https://www.policystack.dev/docs/policy/policies/quick-start

Manually integrate Policy Stack by wrapping your app with the PolicyStack provider and rendering policy components. This example shows rendering both PrivacyPolicy and CookiePolicy.

```tsx
import { PolicyStack } from "@policystack/react/provider";
import { PrivacyPolicy, CookiePolicy } from "@policystack/react/policy";
import policy from "@/policy";

export function PrivacyPolicyPage() {
	return (
		<PolicyStack config={policy}>
			<PrivacyPolicy />
		</PolicyStack>
	);
}
```

--------------------------------

### Basic Usage with Meta Pixel

Source: https://www.policystack.dev/docs/consent/scripts

Import `gateScript` and a vendor integration like `metaPixel`. Configure the vendor with necessary options and then use `gateScript` to manage its lifecycle.

```ts
import { gateScript } from "@policystack/core/consent";
import { metaPixel } from "@policystack/scripts/meta-pixel";

const pixel = metaPixel({ pixelId: "1234567890" });
const dispose = gateScript(store, pixel);
```

--------------------------------

### SvelteKit (SSR + hydration)

Source: https://www.policystack.dev/docs/consent/svelte

Demonstrates how to set up the consent context in a root SvelteKit layout to ensure proper SSR and hydration.

```APIDOC
## SvelteKit (SSR + hydration)

Call `setPolicyStackConsentContext` from your root layout. It uses Svelte's `setContext`, so it hydrates safely:

```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { setPolicyStackConsentContext } from "@policystack/svelte/consent";
  import { categories } from "$lib/cookies";

  setPolicyStackConsentContext({ config: { categories } });

  let { children } = $props();
</script>

{@render children()}
```
```

--------------------------------

### Creating and Interacting with Consent Store

Source: https://www.policystack.dev/docs/consent/core

Demonstrates how to create a consent store, make a decision (accept all), and retrieve the current consent record. The `source` parameter can override the inferred source.

```typescript
const store = createConsentStore({
	categories,
	locale: "en-GB", // optional; falls back to navigator.language, then "en"
	adapter: cookieAdapter(),
});

store.acceptAll();
store.getConsentRecord();
// {
//   schemaVersion: 1,
//   decisions: { essential: true, analytics: true, marketing: true },
//   policyVersion: "",
//   decidedAt: "2026-04-29T12:34:56.000Z",
//   jurisdiction: "EEA",
//   locale: "en-GB",
//   source: "banner",
// }
```

--------------------------------

### PostHog Integration

Source: https://www.policystack.dev/docs/consent/scripts

Configure PostHog with your API key and host. Defaults to requiring 'analytics' consent and queues common `posthog.*` methods. Calls `posthog.init(apiKey, { api_host, ...options })` on load.

```ts
import { posthog } from "@policystack/scripts/posthog";

posthog({ apiKey: "phc_xxx", apiHost: "https://eu.i.posthog.com" });
```

--------------------------------

### Display policystack CLI Help

Source: https://www.policystack.dev/docs/consent/cli

Run the policystack command with the --help flag to view available commands and options.

```sh
policystack --help
```

--------------------------------

### Initialize Consent Store with Default GPC Handling

Source: https://www.policystack.dev/docs/consent/core

Use this to enable GPC handling by default. The store will automatically apply opt-outs when the GPC signal is detected.

```typescript
import { createConsentStore } from "@policystack/core/consent";

const store = createConsentStore({ categories });
// Brave (and any browser asserting GPC) starts with all opt-outs denied.
```

--------------------------------

### Create and use consent store

Source: https://www.policystack.dev/docs/consent/core

Initialize a consent store with categories and a localStorage adapter. Subscribe to state changes and accept all consents.

```ts
import { createConsentStore } from "@policystack/core/consent";
import { localStorageAdapter } from "@policystack/core/consent/storage/local-storage";

const store = createConsentStore({
	categories: [
		{ key: "essential", label: "Essential", locked: true },
		{ key: "analytics", label: "Analytics" },
		{ key: "marketing", label: "Marketing" },
	],
	adapter: localStorageAdapter(),
});

store.subscribe((state) => render(state));
store.acceptAll();
```

--------------------------------

### Render Privacy Policy Page Component

Source: https://www.policystack.dev/docs/policy/policies/quick-start

Render the PrivacyPolicy component on the relevant page after setting up the PolicyStack provider. This assumes you have used the shadcn installation method.

```tsx
import { PrivacyPolicy } from "@/components/ui/policy/privacy-policy";

export default function PrivacyPolicyPage() {
	return <PrivacyPolicy />;
}
```

--------------------------------

### Meta Pixel Integration

Source: https://www.policystack.dev/docs/consent/scripts

Configure Meta Pixel with your pixel ID. Defaults to requiring 'marketing' consent and queues `fbq`. Fires `fbq("init", pixelId)` and `fbq("track", "PageView")` on load.

```ts
import { metaPixel } from "@policystack/scripts/meta-pixel";

metaPixel({ pixelId: "1234567890" });
```

--------------------------------

### Importing Multiple Integrations

Source: https://www.policystack.dev/docs/consent/scripts

If tree-shaking the entry barrel is acceptable for your build, you can import multiple integrations directly from the package root.

```ts
import { ga4, metaPixel, posthog } from "@policystack/scripts";
```

--------------------------------

### Provide PolicyStack Consent with Existing Store

Source: https://www.policystack.dev/docs/consent/angular

Alternatively, you can pass a pre-created consent store to providePolicyStackConsent instead of the configuration object.

```ts
import { createConsentStore } from "@policystack/core/consent";

const store = createConsentStore({ categories });
providePolicyStackConsent({ store });
```

--------------------------------

### Use useCategory composable in Vue

Source: https://www.policystack.dev/docs/consent/vue

Get granular access to a specific category's granted state and toggle its consent status. Requires the category key.

```vue
<script setup lang="ts">
import { useCategory } from "@policystack/vue/consent";

const { granted, toggle } = useCategory("analytics");
</script>

<template>
	<label>
		<input type="checkbox" :checked="granted" @change="toggle" />
		Analytics
	</label>
```

--------------------------------

### Configure Policy Stack Plugin

Source: https://www.policystack.dev/docs/policy/policies/auto-collect

Set up the Policy Stack plugin with custom options for source directory, file extensions, ignored directories, and third-party detection.

```typescript
policyStack({
	srcDir: "src", // directory to scan
	extensions: [".ts", ".tsx"], // file extensions to include
	ignore: ["generated"], // extra directory names to skip
	thirdParties: {
		usePackageJson: true, // detect services from package.json
	},
});
```

--------------------------------

### Setup PolicyStack Provider in Vue App

Source: https://www.policystack.dev/docs/policy/vue

Wrap your Vue application with the PolicyStack provider to manage policy context and consent. Pass your policystack.ts configuration directly to the provider.

```vue
<script setup lang="ts">
import { PolicyStack } from "@policystack/vue/provider";
import policy from "@/policystack";
</script>

<template>
	<PolicyStack :config="policy">
		<RouterView />
	</PolicyStack>
</template>
```

--------------------------------

### Hotjar Integration

Source: https://www.policystack.dev/docs/consent/scripts

Configure Hotjar with your site ID. Defaults to requiring 'analytics' consent and queues `hj`. Sets `_hjSettings` on load.

```ts
import { hotjar } from "@policystack/scripts/hotjar";

hotjar({ siteId: 1234567 });
```

--------------------------------

### Define and Gate a GA4 Script

Source: https://www.policystack.dev/docs/consent/core

Use `defineScript` to configure script details and `gateScript` to manage its loading based on consent. The `queue` option intercepts calls to `dataLayer.push` and `gtag` before the script is loaded.

```typescript
import { createConsentStore, defineScript, gateScript } from "@policystack/core/consent";

const store = createConsentStore({ categories });

const ga4 = defineScript({
	id: "ga4",
	requires: "analytics",
	src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX",
	queue: ["dataLayer.push"],
	init: () => {
		window.dataLayer = window.dataLayer || [];
		window.gtag = function gtag() {
			window.dataLayer.push(arguments);
		};
		window.gtag("js", new Date());
		window.gtag("config", "G-XXXXXXX");
	},
});

gateScript(store, ga4);
```

--------------------------------

### Use Consent Composables in Options API Vue

Source: https://www.policystack.dev/docs/consent/vue

Access consent composables like useConsent and useCategory within the setup() method of Vue's Options API components.

```vue
<script lang="ts">
import { defineComponent } from "vue";
import { useConsent, useCategory } from "@policystack/vue/consent";

export default defineComponent({
	setup() {
		const consent = useConsent();
		const analytics = useCategory("analytics");
		return { consent, analytics };
	},
});
</script>

<template>
	<button @click="consent.acceptAll()">Accept all</button>
	<input type="checkbox" :checked="analytics.granted" @change="analytics.toggle()" />
</template>
```

--------------------------------

### Get Reactive Consent State in Svelte

Source: https://www.policystack.dev/docs/consent/svelte

Use getConsent() to obtain a reactive object for consent state. Access properties directly in markup for reactivity, as they are tracked via $state.

```svelte
<script lang="ts">
  import { getConsent } from "@policystack/svelte/consent";

  const consent = getConsent();
</script>

{#if consent.route === "cookie"}
  <div class="banner">
    <button onclick={consent.acceptNecessary}>Necessary only</button>
    <button onclick={consent.acceptAll}>Accept all</button>
    <button onclick={() => consent.setRoute("preferences")}>Customize</button>
  </div>
{/if}

```

--------------------------------

### Scan Project for Cookies and Vendors

Source: https://www.policystack.dev/docs/consent/scanner

Import and use the `scan` function to analyze your project's source code for cookie writes and vendor scripts. The `cwd` option specifies the project root directory.

```ts
import { scan } from "@policystack/vite/consent";

const result = await scan({ cwd: process.cwd() });
console.log(result.cookies); // Cookie[]
console.log(result.vendors); // VendorHit[]
console.log(result.ungated); // Ungated[]
```

--------------------------------

### Inject and Use ConsentService in a Component

Source: https://www.policystack.dev/docs/consent/angular

Inject the ConsentService into any Angular component to access consent state via signals and trigger consent-related actions. This example shows how to display buttons for managing consent.

```ts
import { Component, inject } from "@angular/core";
import { ConsentService } from "@policystack/angular/consent";

@Component({
	selector: "app-banner",
	standalone: true,
	template: `
		@if (consent.route() === "cookie") {
			<div>
				<button (click)="consent.acceptNecessary()">Necessary only</button>
				<button (click)="consent.acceptAll()">Accept all</button>
				<button (click)="consent.setRoute('preferences')">Customize</button>
			</div>
		}
	`,
})
export class BannerComponent {
	readonly consent = inject(ConsentService);
}
```

--------------------------------

### Segment Integration

Source: https://www.policystack.dev/docs/consent/scripts

Configure Segment with your write key. Defaults to requiring 'analytics' consent and queues common `analytics.*` methods. Calls `analytics.page()` on load.

```ts
import { segment } from "@policystack/scripts/segment";

segment({ writeKey: "WRITE_KEY" });
```

--------------------------------

### Inject and Use a Specific Category with injectCategory

Source: https://www.policystack.dev/docs/consent/angular

Use the injectCategory function to get granular access to a specific consent category within an Angular component. This allows direct control over category-specific toggles and states.

```ts
import { Component } from "@angular/core";
import { injectCategory } from "@policystack/angular/consent";

@Component({
	selector: "category-row",
	standalone: true,
	template: `
		<label>
			<input type="checkbox" [checked]="analytics.granted()" (change)="analytics.toggle()" />
			Analytics
		</label>
	`,
})
export class CategoryRowComponent {
	readonly analytics = injectCategory("analytics");
}
```

--------------------------------

### useCategory(key)

Source: https://www.policystack.dev/docs/consent/vue

Granular per-category access. Returns a `granted` computed and a `toggle` action.

```APIDOC
## useCategory(key)

### Description
Granular per-category access. Returns a `granted` computed and a `toggle` action.

### Parameters
#### Path Parameters
- **key** (string) - Required - The key of the category to access.

### Usage
```vue
<script setup lang="ts">
import { useCategory } from "@policystack/vue/consent";

const { granted, toggle } = useCategory("analytics");
</script>

<template>
	<label>
		<input type="checkbox" :checked="granted" @change="toggle" />
		Analytics
	</label>
</template>
```

### Returns
- `granted` (computed): A computed property indicating if the category is granted.
- `toggle` (function): Function to toggle the consent for the category.
```

--------------------------------

### Runtime Validator Error for Unknown Jurisdiction

Source: https://www.policystack.dev/docs/policy/references/jurisdictions

The runtime validator rejects any code that isn't a member of the union with a helpful error message. This example shows the expected output when an invalid jurisdiction code is provided.

```text
Unknown jurisdiction "eu" — valid codes: eea, uk, ch, br, ca, us, us-ca, us-co, us-ct, us-va, row

```

--------------------------------

### Initialize PolicyStack Provider and Use Consent Hooks

Source: https://www.policystack.dev/docs/consent

Wrap your application with the PolicyStack provider, passing your configuration. Use the useConsent hook to access consent state and functions within your components. The CookieBanner component demonstrates conditional rendering and user interaction for consent management.

```tsx
import { PolicyStack } from "@policystack/react/provider";
import { useConsent, ConsentGate } from "@policystack/react/consent";
import config from "./policystack";

function App() {
	return (
		<PolicyStack config={config}>
			<YourApp />
			<CookieBanner />
		</PolicyStack>
	);
}

function CookieBanner() {
	const { route, acceptAll, acceptNecessary, setRoute } = useConsent();
	if (route !== "cookie") return null;

	return (
		<div className="your-styles-here">
			<p>We use cookies to improve your experience.</p>
			<button onClick={acceptAll}>Accept all</button>
			<button onClick={acceptNecessary}>Necessary only</button>
			<button onClick={() => setRoute("preferences")}>Customise</button>
		</div>
	);
}

// Gate third-party code on consent
<ConsentGate requires="analytics">
	<GoogleAnalytics />
</ConsentGate>;
```

--------------------------------

### Define Custom Consent Scanner Rule

Source: https://www.policystack.dev/docs/consent/scanner

Example of defining a custom rule to ban specific imports, like 'plausible-tracker'. It uses the `defineRule` function and reports violations with file, line, column, vendor, category, and the method of detection.

```typescript
import { defineRule, scan, defaultRules } from "@policystack/vite/consent";

const banPlausible = defineRule({
	name: "plausible-import",
	visit: (ctx) => {
		if (ctx.node.type !== "ImportDeclaration") return;
		const src = (ctx.node as { source?: { value?: string } }).source?.value;
		if (src === "plausible-tracker") {
			const { line, column } = ctx.position(ctx.node.start);
			ctx.report({
				file: ctx.file,
				line,
				column,
				vendor: "plausible",
				category: "analytics",
				via: "import",
			});
		}
	},
});

await scan({ cwd: process.cwd(), rules: [...defaultRules, banPlausible] });
```

--------------------------------

### React Native/Expo Policy Component with Custom Renderers

Source: https://www.policystack.dev/docs/policy/policies/quick-start

Configure and render Policy components in React Native (Expo) by providing custom renderers for various elements via the `components` prop. This example includes custom renderers for Root, Section, Heading, Paragraph, List, ListItem, Text, Bold, Italic, and Link.

```tsx
import { Linking, Pressable, Text, View } from "react-native";
import { PrivacyPolicy, type PolicyComponents } from "@policystack/react/policy";
import policy from "./policy";

const components: PolicyComponents = {
	Root: ({ children }) => <View>{children}</View>,
	Section: ({ children }) => <View>{children}</View>,
	Heading: ({ node }) => (
		<Text style={{ fontSize: 24 - (node.level ?? 2) * 2, fontWeight: "600" }}>{node.value}</Text>
	),
	Paragraph: ({ children }) => <Text>{children}</Text>,
	List: ({ children }) => <View>{children}</View>,
	ListItem: ({ children }) => (
		<Text>
			{"\u2022 "}
			{children}
		</Text>
	),
	Text: ({ node }) => <>{node.value}</>,
	Bold: ({ node }) => <Text style={{ fontWeight: "bold" }}>{node.value}</Text>,
	Italic: ({ node }) => <Text style={{ fontStyle: "italic" }}>{node.value}</Text>,
	Link: ({ node }) => (
		<Pressable onPress={() => Linking.openURL(node.href)}>
			<Text style={{ textDecorationLine: "underline" }}>{node.value}</Text>
		</Pressable>
	),
};

export function PrivacyScreen() {
	return <PrivacyPolicy config={policy} components={components} />;
}
```

--------------------------------

### Svelte 4 Stores Fallback with createConsentReadable

Source: https://www.policystack.dev/docs/consent/svelte

For Svelte 4 or when preferring $store syntax, import createConsentReadable from @policystack/svelte/consent/stores. It returns a Readable<ConsentState> with action methods.

```svelte
<script>
  import { createConsentReadable } from "@policystack/svelte/consent/stores";

  const consent = createConsentReadable({
    config: { categories: [/* ... */] },
  });

  $: route = $consent.route;
</script>

{#if route === "cookie"}
  <button on:click={consent.acceptAll}>Accept all</button>
{/if}

```

--------------------------------

### useCategory(key) Hook

Source: https://www.policystack.dev/docs/consent/react

Provides granular access to the consent state and toggle functionality for a specific category.

```APIDOC
## useCategory(key)

### Description
Granular per-category access. Returns `{ granted, toggle }`.

### Usage
```tsx
import { useCategory } from "@policystack/react/consent";

function CategoryToggle({ categoryKey }) {
	const { granted, toggle } = useCategory(categoryKey);

	return (
		<label>
			<input type="checkbox" checked={granted} onChange={toggle} />
			{categoryKey}
		</label>
	);
}
```

### Parameters
- `key` (string): The unique key of the consent category.

### Return Value
An object containing:
- `granted` (boolean): Whether the category is currently granted.
- `toggle` (function): Function to toggle the granted state of the category.
```

--------------------------------

### Google Tag Manager Integration

Source: https://www.policystack.dev/docs/consent/scripts

Configure Google Tag Manager with your container ID. Defaults to requiring 'marketing' consent and queues `dataLayer.push`. Seeds `dataLayer` with `gtm.start` on load.

```ts
import { googleTagManager } from "@policystack/scripts/google-tag-manager";

googleTagManager({ containerId: "GTM-XXXXXX" });
```

--------------------------------

### useCategory(key) Hook

Source: https://www.policystack.dev/docs/consent/solid

Allows for granular control and access to the consent state for a specific category. It provides reactive properties and methods to manage the granted status and toggle the category.

```APIDOC
## useCategory(key)

### Description
Provides granular per-category access to consent state.

### Parameters
#### Path Parameters
- **key** (string) - Required - The unique identifier for the consent category.

### Usage
```tsx
import { useCategory } from "@policystack/solid/consent";

function AnalyticsToggle() {
	const analytics = useCategory("analytics");
	return (
		<label>
			<input type="checkbox" checked={analytics.granted()} onChange={analytics.toggle} />
			Analytics
		</label>
	);
}
```

### Returns
An object for the specified category containing:
- `granted`: A signal indicating if the category is granted.
- `toggle`: Function to toggle the granted state of the category.
```

--------------------------------

### Create Policystack Configuration

Source: https://www.policystack.dev/docs/policy/configuration

Define your company details, data collection policies, cookie usage, and jurisdiction-specific settings in `policystack.ts`.

```typescript
import { ContractPrerequisite, defineConfig, LegalBases, Voluntary } from "@policystack/sdk";

export default defineConfig({
	company: {
		name: "Acme Inc.",
		legalName: "Acme Corporation",
		address: "123 Main St, Springfield, USA",
		contact: { email: "privacy@acme.com" },
	},
	effectiveDate: "2026-01-01",
	jurisdictions: ["eea", "us-ca"],
	data: {
		collected: {
			"Account Information": ["Name", "Email address"],
			"Usage Data": ["Pages visited", "IP address"],
		},
		context: {
			"Account Information": {
				purpose: "To authenticate users and send service notifications",
				lawfulBasis: LegalBases.Contract,
				retention: "Until account deletion",
				provision: ContractPrerequisite("We cannot create or operate your account."),
			},
			"Usage Data": {
				purpose: "To understand product usage and improve the service",
				lawfulBasis: LegalBases.LegitimateInterests,
				retention: "90 days",
				provision: Voluntary("None — your service is unaffected."),
			},
		},
	},
	thirdParties: [],
	cookies: {
		used: { essential: true, analytics: false, marketing: false },
		context: {
		
essential: { lawfulBasis: LegalBases.LegalObligation },
			analytics: { lawfulBasis: LegalBases.Consent },
			marketing: { lawfulBasis: LegalBases.Consent },
		},
	},
	automatedDecisionMaking: [],
});
```

--------------------------------

### Create Consent Store with Header Resolver

Source: https://www.policystack.dev/docs/consent/core

Use headerResolver for edge runtimes to read country from request headers like `cf-ipcountry`, `x-vercel-ip-country`, or `x-country`.

```typescript
import { createConsentStore, headerResolver } from "@policystack/core/consent";

// Edge runtime (Cloudflare, Vercel, Netlify): read country from request headers.
const store = createConsentStore({
	categories,
	jurisdictionResolver: headerResolver(),
	request, // standard Request, or anything with a Headers instance
});
```

--------------------------------

### Configure policyStack Vite Plugin

Source: https://www.policystack.dev/docs/consent/vite

Configure the policyStack plugin in your vite.config.ts file. Enable the consent scanner by passing the 'consent' option with a desired mode.

```ts
import { defineConfig } from "vite";
import { policyStack } from "@policystack/vite";

export default defineConfig({
	plugins: [
		policyStack({
			consent: { mode: "warn" },
		}),
	],
});
```
Tokens:
Raw