feat: add PostHog add-on

.changeset/wicked-paws-live.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/create': minor
+---
+
+Add PostHog add-on

packages/create/src/frameworks/react/add-ons/posthog/README.md

@@ -0,0 +1,9 @@
+## Setting up PostHog
+
+1. Create a PostHog account at [posthog.com](https://posthog.com)
+2. Get your Project API Key from [Project Settings](https://app.posthog.com/project/settings)
+3. Set `VITE_POSTHOG_KEY` in your `.env.local`
+
+### Optional Configuration
+
+- `VITE_POSTHOG_HOST` - Set this if you're using PostHog Cloud EU (`https://eu.i.posthog.com`) or self-hosting

packages/create/src/frameworks/react/add-ons/posthog/assets/_dot_env.local.append

@@ -0,0 +1,4 @@
+# PostHog configuration, get your key from https://app.posthog.com/project/settings
+VITE_POSTHOG_KEY=phc_xxx
+# Optional: PostHog API host (for self-hosted or EU cloud)
+# VITE_POSTHOG_HOST=https://us.i.posthog.com

packages/create/src/frameworks/react/add-ons/posthog/assets/src/integrations/posthog/provider.tsx

@@ -0,0 +1,20 @@
+import posthog from 'posthog-js'
+import { PostHogProvider as BasePostHogProvider } from '@posthog/react'
+import type { ReactNode } from 'react'
+
+if (typeof window !== 'undefined' && import.meta.env.VITE_POSTHOG_KEY) {
+  posthog.init(import.meta.env.VITE_POSTHOG_KEY, {
+    api_host: import.meta.env.VITE_POSTHOG_HOST || 'https://us.i.posthog.com',
+    person_profiles: 'identified_only',
+    capture_pageview: false,
+    defaults: '2025-11-30',
+  })
+}
+
+interface PostHogProviderProps {
+  children: ReactNode
+}
+
+export default function PostHogProvider({ children }: PostHogProviderProps) {
+  return <BasePostHogProvider client={posthog}>{children}</BasePostHogProvider>
+}

packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/posthog.tsx

@@ -0,0 +1,93 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { usePostHog } from '@posthog/react'
+import { useState } from 'react'
+
+export const Route = createFileRoute('/demo/posthog')({
+  component: PostHogDemo,
+})
+
+function PostHogDemo() {
+  const posthog = usePostHog()
+  const [eventCount, setEventCount] = useState(0)
+  const posthogKey = import.meta.env.VITE_POSTHOG_KEY
+  const isConfigured = Boolean(posthogKey) && posthogKey !== 'phc_xxx'
+
+  const trackEvent = (
+    eventName: string,
+    properties?: Record<string, unknown>,
+  ) => {
+    posthog.capture(eventName, properties)
+    setEventCount((c) => c + 1)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-8">
+      <div className="max-w-md mx-auto">
+        <h1 className="text-3xl font-bold mb-6">PostHog Demo</h1>
+
+        {!isConfigured && (
+          <div className="mb-4 p-4 bg-yellow-900/50 border border-yellow-600 rounded-lg">
+            <p className="text-yellow-200 text-sm">
+              <strong>Warning:</strong> VITE_POSTHOG_KEY is not configured.
+              Events won't be sent to PostHog. Add it to your{' '}
+              <code className="bg-yellow-900 px-1 rounded">.env</code> file.
+            </p>
+          </div>
+        )}
+
+        <div className="bg-gray-800 rounded-lg p-6">
+          <p className="text-gray-400 mb-4">
+            Click the button below to send events to PostHog. Check your PostHog
+            dashboard to see them appear in real-time.
+          </p>
+
+          <button
+            onClick={() => trackEvent('button_clicked', { button: 'demo' })}
+            className="w-full bg-cyan-600 hover:bg-cyan-700 px-4 py-3 rounded font-medium"
+          >
+            Track Click
+          </button>
+
+          {isConfigured && (
+            <div className="mt-6 p-4 bg-gray-700 rounded">
+              <p className="text-sm text-gray-400">Events sent this session:</p>
+              <p className="text-4xl font-bold text-cyan-400">{eventCount}</p>
+            </div>
+          )}
+        </div>
+
+        <p className="mt-4 text-sm text-gray-400">
+          Open your{' '}
+          <a
+            href="https://app.posthog.com/events"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-cyan-400 hover:text-cyan-300 underline"
+          >
+            PostHog Events
+          </a>{' '}
+          page to see these events appear.
+        </p>
+
+        <p className="mt-2 text-sm text-gray-400">
+          Learn more in the{' '}
+          <a
+            href="https://posthog.com/docs/libraries/react"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-cyan-400 hover:text-cyan-300 underline"
+          >
+            PostHog React docs
+          </a>
+          .
+        </p>
+
+        <div className="mt-8">
+          <Link to="/" className="text-cyan-400 hover:text-cyan-300">
+            &larr; Back to Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/create/src/frameworks/react/add-ons/posthog/files.json

@@ -0,0 +1,5 @@
+[
+  "src/integrations/posthog/provider.tsx",
+  "src/routes/demo/posthog.tsx",
+  "_dot_env.local.append"
+]

packages/create/src/frameworks/react/add-ons/posthog/info.json

@@ -0,0 +1,28 @@
+{
+  "name": "PostHog",
+  "description": "Product analytics, session replay, and feature flags",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "analytics",
+  "color": "#1D4AFF",
+  "priority": 20,
+  "link": "https://posthog.com",
+  "tailwind": true,
+  "routes": [
+    {
+      "icon": "BarChart",
+      "url": "/demo/posthog",
+      "name": "PostHog",
+      "path": "src/routes/demo/posthog.tsx",
+      "jsName": "PostHogDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "provider",
+      "jsName": "PostHogProvider",
+      "path": "src/integrations/posthog/provider.tsx"
+    }
+  ]
+}

packages/create/src/frameworks/react/add-ons/posthog/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "posthog-js": "^1.335.4",
+    "@posthog/react": "^1.7.0"
+  }
+}

packages/create/src/types.ts

@@ -50,6 +50,7 @@ export const AddOnBaseSchema = z.object({
       'monitoring',
       'cms',
       'api',
+      'analytics',
       'i18n',
       'tooling',
       'other',