Overprint ships as private packages on GitHub Packages under the @maxgrits scope. Installing takes a registry line,
a token that can read packages, and the packages you need. No account wizard, no newsletter.
1. Point the scope at GitHub Packages#
Add an .npmrc next to your package.json. The token comes from the environment, never from the file:
@maxgrits:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}2. Make a token that can read packages#
Create a classic personal access token with the read:packages scope on GitHub, then export it in your shell profile
as GITHUB_PACKAGES_TOKEN. On Vercel, add an environment variable NPM_RC that holds the whole .npmrc with the
token written out; Vercel reads it before the install.
Keep the token out of Git
The .npmrc above reads the token from the environment. Never commit a file with the token written into it.
3. Install what you need#
| You want | Install |
|---|---|
| Tokens and the CSS foundation | @maxgrits/overprint-tokens, @maxgrits/overprint-react |
| The type | @maxgrits/overprint-fonts |
| Components, kits, motion and sound | @maxgrits/overprint-react (React 19.2 or newer) |
| The 3D blocks | @maxgrits/overprint-three, three and @react-three/fiber |
| Cards, covers, photo plates and PDFs | @maxgrits/overprint-generators, plus sharp |
For a Next.js site, the usual set is the first three:
pnpm add @maxgrits/overprint-tokens @maxgrits/overprint-fonts @maxgrits/overprint-reactEvery package moves on one version (a fixed Changesets group), so keep them on the same number.
4. Wire it up#
The Next.js recipe covers the layout, the CSS layer order, the config and the 3D gate, with every excerpt pulled from the consumer app the release checks build.