> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tracelit.io/llms.txt
> Use this file to discover all available pages before exploring further.
# React
> Install Tracelit in a React app with one import. Supports Vite, Create React App, and any React setup.
```bash theme={null}
npm install @tracelit/tracker
```
Add `init()` once at the top level of your app — `main.tsx` or `App.tsx` works great.
```tsx theme={null}
// src/main.tsx or src/App.tsx
import { init } from '@tracelit/tracker'
init({
token: 'YOUR_TOKEN_HERE',
environment: 'production', // or "development"
})
```
That's it. Tracelit handles SPA route changes automatically via `history.pushState` — no router config needed.
Always set `environment`. Only `"production"` and `"development"` are accepted. If omitted, events default to `development`.
Using authentication? Call `identify()` after login to link sessions to real users. See [Identify users](/tracking/identify-users).
***
## What's tracked automatically
Once `init()` runs, all of this starts working with zero extra code:
* Page views (including client-side route changes)
* Clicks, rage clicks, and scroll depth
* Session replay
* JavaScript and API errors
* Performance metrics (LCP, FCP, TTFB)
* Live visitor count
***
## LLM Prompt
Paste this into your coding assistant to install Tracelit for you:
```text theme={null}
Install Tracelit in my React project.
Use @tracelit/tracker and initialize it in src/main.tsx (or App.tsx) with:
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
Make only minimal changes, then show changed files and a quick verification checklist.
```
***
## What's next?
| Topic | Description | Guide |
| --------------------------------------- | --------------------------------------------- | --------------------------------- |
| **Identify users** | Full guide to linking sessions to real users. | [Read](/tracking/identify-users) |
| **Feature tagging** | Tag flows in session replays. | [Read](/features/feature-tagging) |