

<Callout type="warning">
  All Cubitt packages are published as **private GitHub Packages** under the
  `@tilt-legal` scope. You'll need to authenticate to install them.
</Callout>

<Steps>
  <Step>
    ### Generate GitHub Token [#generate-github-token]

    1. Go to GitHub → Settings → Developer Settings → [Personal Access Tokens](https://github.com/settings/tokens)
    2. Create a new token with &#x2A;*`read:packages`** scope
    3. Copy the token (starts with `ghp_...`)
  </Step>

  <Step>
    ### Configure `.npmrc` [#configure-npmrc]

    Create `.npmrc` in your project root and **commit it to your repository**:

    ```ini
    @tilt-legal:registry=https://npm.pkg.github.com
    //npm.pkg.github.com/:_authToken=${GH_NPM_TOKEN}
    ```

    An `.npmrc` file is required by Vercel/CI to locate and authenticate with the package registry. Installing packages will fail without it.

    <Callout type="warning">
      Only commit the `.npmrc` file if it uses environment variables. Never commit a
      file containing actual tokens.
    </Callout>
  </Step>

  <Step>
    ### Set Environment Variable [#set-environment-variable]

    To permanently set the environment variable, add it to your `.zshrc` or `.bashrc` file.

    ```bash
    export GH_NPM_TOKEN=ghp_your_token_here
    ```

    <Callout type="info">
      `GH_NPM_TOKEN` is already set in the Vercel environment variables for the Tilt Legal team. This means any project in the Tilt Legal team will be able to install Cubitt packages automatically during build time.
    </Callout>
  </Step>

  <Step>
    ### Install Cubitt Packages [#install-cubitt-packages]

    ```bash
    pnpm add @tilt-legal/cubitt-icons @tilt-legal/cubitt-components @tilt-legal/cubitt-logos
    ```

    <Callout type="info">
      After install, see [Imports and Namespaces](/get-started/namespaces) for the canonical import paths for components, icons, and logos.
    </Callout>
  </Step>

  <Step>
    ### Configure TanStack Router URL State [#configure-tanstack-router-url-state]

    If you plan to use Cubitt's built-in URL state props, follow the
    [URL State Management Guide](/guides/url-state) to ensure your app is
    wrapped in `RouterProvider` and your router registration is available for
    type-safe `paramName` keys.
  </Step>
</Steps>