A Next.js demo app that integrates OpenPolicy — an open-source policy-as-code framework for generating and displaying legal pages (Privacy Policy, Terms of Service, Cookie Policy) with cookie consent support.
- Legal pages —
/privacy,/terms, and/cookieroutes powered by@openpolicy/react - Cookie consent — banner and preferences panel via the OpenPolicy cookie-banner registry component
- Dark mode — light/dark toggle using
next-themes - Theming — OpenPolicy components styled with CSS variables to match the app theme
- shadcn UI — shared primitives (Button, Card, Dialog, Switch, etc.)
app/
layout.tsx # Root layout with OpenPolicyProvider
page.tsx # Home page
privacy/page.tsx # Privacy Policy route
terms/page.tsx # Terms of Service route
cookie/page.tsx # Cookie Policy route
components/
OpenPolicyProvider.tsx # Wraps app with OpenPolicy context + consent UI
Header.tsx # Site header with navigation
Banner.tsx # Page banner
DarkModeToggle.tsx # Light/dark switcher
ThemeProvider.tsx # next-themes provider
ui/ # shadcn UI primitives
lib/
openpolicy.ts # OpenPolicy SDK configuration
navs.ts # Navigation links
utils.ts # Shared utilities
docs/
openpolicy-react-sdk-install-config-guide.md # Full setup guide
Install dependencies:
pnpm installRun the development server:
pnpm devOpen http://localhost:3000 in your browser.
Build for production:
pnpm build
pnpm startAll policy and consent settings live in lib/openpolicy.ts. Update the company, privacy, terms, and cookie fields with your real business details before deploying to production.
| Package | Purpose |
|---|---|
next 16 |
App framework |
@openpolicy/sdk |
Policy-as-code configuration |
@openpolicy/react |
Legal page and consent UI components |
next-themes |
Dark/light mode |
radix-ui + shadcn |
Accessible UI primitives |
tailwindcss 4 |
Utility-first styling |
MIT