> ## Documentation Index
> Fetch the complete documentation index at: https://highseat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# TanStack Start

> Install Highseat in a TanStack Start app with the highseat package, rendered in the root route.

The `highseat` package renders the tracker's script tag and gives you a typed `track()`. The tracker loads from `cdn.highseat.com`, so the install needs no secret and no server code.

Replace `YOUR_SITE_ID` with your site's id, which starts with `site_`. **Site settings › Installation** in the dashboard shows it, with this code already filled in.

<Steps>
  <Step title="Install the package">
    ```bash theme={null}
    npm install highseat
    ```
  </Step>

  <Step title="Add it to your root route">
    Inside `<body>`, in the root route’s component.

    ```tsx src/routes/__root.tsx highlight={1,3} theme={null}
    import { Highseat } from "highseat/react"

    <Highseat site="YOUR_SITE_ID" />
    ```
  </Step>
</Steps>

The component comes from `highseat/react`, since TanStack Start renders a React tree. The tracker counts each client-side navigation as a page view.

Deploy, then [verify your install](/docs/install/verify). Highseat counts only your site's own domain, so a visit to `localhost` does not complete the install.

## Use an environment variable

Read the site id from VITE\_HIGHSEAT\_SITE, set for the build: Vite writes it into the bundle. With another bundler, use its public prefix.

```dotenv .env theme={null}
VITE_HIGHSEAT_SITE=YOUR_SITE_ID
```

```tsx theme={null}
<Highseat site={import.meta.env.VITE_HIGHSEAT_SITE} />
```

Vite writes `VITE_HIGHSEAT_SITE` into the bundle when it builds, so set it in the build's environment before the deploy, as a build argument in a Docker build.

## Pages that are not found

A 404 the server answers is detected on its own. A single-page app also calls highseat.track("404") in the component its router renders for an unknown route.

In TanStack Start, that component is the root route's `notFoundComponent`.

## Content Security Policy

Allow the ingest host in script-src and connect-src.

```text theme={null}
script-src https://cdn.highseat.com;
connect-src https://cdn.highseat.com;
```

## Without the package

Use the package in a TanStack Start app rather than a script tag in the root route. A `<script>` tag that React creates in the browser never runs, so a hand-written tag can fail with no error. `<Highseat />` adds the tag from outside React.

## Next steps

<Card title="Track events" icon="mouse-pointer-click" href="/docs/events">
  Send signups and purchases with a typed `track()`.
</Card>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.