OpenPolicy with TanStack

Add legal pages to TanStack Router apps using the same React components as any other React project.

Install

bun add @openpolicy/sdk @openpolicy/react

Define your policy

// src/openpolicy.ts
import { definePrivacyPolicy } from "@openpolicy/sdk";

export const privacyPolicy = definePrivacyPolicy({
	company: { name: "Acme Inc.", website: "https://acme.com" },
	contact: { email: "privacy@acme.com" },
	compliance: { gdpr: true, ccpa: true },
});

Render in a route

// src/routes/privacy-policy.tsx
import { createFileRoute } from "@tanstack/react-router";
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/react";
import { privacyPolicy } from "../openpolicy";

export const Route = createFileRoute("/privacy-policy")({
	component: PrivacyPolicyPage,
});

function PrivacyPolicyPage() {
	return (
		<main>
			<OpenPolicy config={privacyPolicy}>
				<PrivacyPolicy />
			</OpenPolicy>
		</main>
	);
}

Why OpenPolicy for TanStack

• File-based routing friendly — one file, one route, one policy component
• Type-safe config — definePrivacyPolicy is fully typed; wrong fields are compile errors
• No external dependencies at runtime — policy content is pre-compiled, not fetched
• Audit trail in git — every policy change is a commit, reviewable in PRs