Quick Start

Using shadcn (recommended)

Install a ready-to-use policy component from the OpenPolicy shadcn registry. This copies Tailwind-styled components into your project alongside a starter config.

# Privacy Policy
bunx shadcn@latest add @openpolicy/privacy-policy

# Terms of Service
bunx shadcn@latest add @openpolicy/terms-of-service

# Cookie Policy
bunx shadcn@latest add @openpolicy/cookie-policy

Each command installs the component, a policy-components.tsx base renderer, and an openpolicy.ts starter config. Fill out the config then wrap your app with the <OpenPolicy> provider:

import { OpenPolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export default function RootLayout({ children }) {
  return (
    <OpenPolicy config={openpolicy}>
      {children}
    </OpenPolicy>
  );
}

Then render the component on the relevant page:

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

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

Manual

Install the packages:

bun add @openpolicy/react @openpolicy/sdk

Wrap your app with the provider, then render whichever components you need:

import { OpenPolicy, PrivacyPolicy, TermsOfService, CookiePolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export function PrivacyPolicyPage() {
  return (
    <OpenPolicy config={openpolicy}>
      <PrivacyPolicy />
    </OpenPolicy>
  );
}

The components render unstyled by default. Pass a components prop to supply your own renderers for headings, paragraphs, lists, and links, or add the style prop for inline styles.

Quick Start

Using shadcn (recommended)

Manual

On this page