React web analytics installation

For React-based frameworks, we recommend the Next.js integration guide and Next.js integration guide instead.

1. Install posthog-js and @posthog/react using your package manager:

npm install --save posthog-js @posthog/react

yarn add posthog-js @posthog/react

pnpm add posthog-js @posthog/react

bun add posthog-js @posthog/react

2. Add your environment variables to your .env.local file and to your hosting provider (e.g. Vercel, Netlify, AWS). You can find your project API key and host in your project settings. If you're using Vite, include VITE_PUBLIC_ in their names ensures they are accessible in the frontend.

VITE_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

3. Integrate PostHog at the root of your app (such as main.jsx for Vite apps and root.tsx for React Router V7).

// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import posthog from 'posthog-js'; 
import { PostHogProvider } from '@posthog/react' 

posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, { 
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST, 
  defaults: '2025-11-30', 
}); 

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <PostHogProvider client={posthog}> 
      <App />
    </PostHogProvider> 
  </StrictMode>,
)

Next steps

After installing PostHog and ensuring autocapture is enabled, head to your web analytics dashboard to see your data. And then check out our getting started guide.

PostHog tip: Web analytics works with anonymous events. This means if you are primarily using PostHog for web analytics, it can be significantly cheaper for you.