Skip to content

tanstack

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

tanstack

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
components.json
components.json
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
vite.config.ts
vite.config.ts
 
 

README.md

PolicyStack

TanStack Start Example — the canonical PolicyStack reference

This is the reference app for PolicyStack: one TanStack Start (React + Vite) project that shows the whole picture end to end. The framework-neutral config lives in src/policystack.ts — the only framework-specific line is the provider wiring in src/routes/__root.tsx. It also doubles as the scanner regression net (the policyStack() plugin scans this source to generate src/policystack.gen.ts).

What it demonstrates

  • One defineConfig() is the single source of truth — it generates the privacy + cookie policy documents and derives the consent runtime (categories, locked vs. consent-gated, re-prompt on policy change).
  • One provider for everything. __root.tsx mounts the single <PolicyStack> from @policystack/react/provider. Because the config declares cookies, that same provider also mounts the consent store — no separate consent/cookies provider is wired.
  • @policystack/react components (PrivacyPolicy, CookiePolicy) rendered directly as React components.
  • Three styling approaches across three routes:
    • /tailwind — policies styled with Tailwind utility classes
    • /css-vars — policies styled with CSS custom properties
    • /shadcn — a custom Heading using a shadcn Tooltip to surface node.context.reason on hover
  • Configuring the policyStack() plugin in vite.config.ts alongside TanStack Start.

Project structure

vite.config.ts                ← policyStack() plugin + TanStack Start + Tailwind
src/policystack.ts             ← defineConfig() — framework-neutral, fully commented
src/policystack.gen.ts         ← generated by policyStack()'s source scan
src/routes/__root.tsx         ← root layout: <PolicyStack> (policy + consent) + nav
src/routes/index.tsx          ← "/" — placeholder
src/routes/tailwind.tsx       ← "/tailwind" — policies styled with Tailwind classes
src/routes/css-vars.tsx       ← "/css-vars" — policies styled with CSS custom properties
src/routes/shadcn.tsx         ← "/shadcn" — policies with custom Heading + shadcn Tooltip
src/components/ui/tooltip.tsx ← Radix UI Tooltip wrapper

Running locally

vp install
vp dev      # start dev server on http://localhost:3000
vp build    # production build

Learn more