All Cubitt packages are published as **private GitHub Packages** under the
`@tilt-legal` scope. You'll need to authenticate to install them.
### 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 **`read:packages`** scope
3. Copy the token (starts with `ghp_...`)
### 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.
Only commit the `.npmrc` file if it uses environment variables. Never commit a
file containing actual tokens.
### 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
```
`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.
### Install Cubitt Packages [#install-cubitt-packages]
```bash
pnpm add @tilt-legal/cubitt-icons @tilt-legal/cubitt-components @tilt-legal/cubitt-logos tailwindcss
```
Cubitt's `styles.css` export is authored for Tailwind CSS, so consumer apps need `tailwindcss` installed for their Tailwind pipeline to process Cubitt styles and source scanning directives.
After install, see [Imports and Namespaces](/get-started/namespaces) for the canonical import paths for components, icons, and logos.
### Import Styles [#import-styles]
Import Cubitt styles once from your app root, route shell, or global CSS entrypoint:
```tsx
import "@tilt-legal/cubitt-components/styles.css";
```
These styles define Cubitt's Tailwind utilities, CSS variables, surface tokens, shadows, frosted utilities, and brand themes.
### Add Surface Context [#add-surface-context]
Wrap only app-owned painted boundaries in `SurfaceProvider`. Most apps set one provider at the root shell, then add a nested provider only where app-owned content resets to a different surface.
```tsx
import { SurfaceProvider } from "@tilt-legal/cubitt-components/utilities";
export function AppShell({ children }: { children: React.ReactNode }) {
return (
);
}
```
`SurfaceProvider` does not paint a background. It tells Cubitt components what surface has already been painted by your app. You do not need providers around normal Cubitt nesting; Cubitt-owned containers advance or reset context internally.
For the full ownership model, see [Surface
System](/foundations/surfaces).
### 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.