Katla

Introducing the Katla Examples Repo

Six ready-to-run example projects showing how to integrate Katla cookie consent with Next.js, Vite, and vanilla HTML.

By Katla Team
examples
Next.js
Vite
React
widget
SDK

We just published katla-app/examples — a collection of six starter projects that show how to integrate Katla cookie consent into real apps. Each example is self-contained, runs locally, and covers a different integration pattern.

Why examples

Documentation explains the API. Examples show how the pieces fit together. Whether you're adding a consent widget to a marketing site or building a custom consent UI in a React app, these projects give you a working starting point you can adapt.

What's included

Widget

A Vite multipage site that loads the hosted Katla widget via a script tag and embeds the cookie policy page in an iframe. No SDK, no framework — just HTML and the CDN.

Best for: Static sites, CMS-rendered pages, or anywhere you want consent without a build step.

View example · Widget docs

Next.js — dynamic SSR

A Next.js 16 App Router project using getCachedCookies from @katla.app/sdk/next/server to fetch cookies on the server. The client gets pre-loaded data with no extra network request.

Best for: Server-rendered Next.js apps that want fresh cookie data on every request.

View example · Next.js docs

Next.js — static build-time

A Next.js 16 App Router project that runs katla pull at build time. Cookie data and the guard script are bundled as static assets — zero runtime fetches.

Best for: Statically exported Next.js sites or when you want the fastest possible load.

View example · Static cookies docs

Vite + React — dynamic fetching

A Vite 7 + React 19 app that fetches cookies and policy data at runtime using the SDK hooks. Includes CookieBanner and CookieCatalog components.

Best for: SPAs that always want the latest cookie data from the CDN.

View example · React docs

Vite + React — static build-time

A Vite 7 + React 19 app using katla pull to fetch cookie data at build time. The JSON is imported directly — no runtime fetch needed.

Best for: SPAs with a build pipeline that want to eliminate client-side requests.

View example · Static cookies docs

Vite + React — custom consent UI

A Vite 7 + React 19 app that uses the useConsentManager hook to build a fully custom consent UI. No pre-built banner component — just your own markup and logic.

Best for: Teams that need full control over the consent experience and want to match their design system.

View example · useConsentManager docs

Getting started

Every example follows the same setup:

git clone https://github.com/katla-app/examples.git
cd examples/<project>
npm install

Replace the placeholder site ID with your own (from katla.app), then start the dev server. Each project's README has the specific details.

Explore the repo

Browse all six examples on GitHub: katla-app/examples