Getting started

1. Point the scope at Artifact Registry
   Alpha is published to the internal Google Artifact Registry, not npmjs. Add this to your .npmrc:

   @growth-protocol-ai:registry=https://us-central1-npm.pkg.dev/gp-artifact-registry/npm/

   Copy
2. Authenticate once, globally
   Authentication uses your Google identity and a short-lived token — never a personal access token, never a service-account key, and never a committed credential:

   gcloud auth login
   npm config set \
     "//us-central1-npm.pkg.dev/gp-artifact-registry/npm/:_authToken" \
     "$(gcloud auth print-access-token)"

   Copy

   In a Yarn repository yarn artifactregistry-login does the same in one step. Your identity needs roles/artifactregistry.reader on the repository, and tokens last about an hour.
3. Install

   pnpm add @growth-protocol-ai/alpha

   Copy

   react and react-dom are peers: ^18.3 || ^19.
4. Import the stylesheet and set the mode
   Once, in your root layout — then set data-mode on <html>. It takes dark or light, and dark is what renders if you set nothing. Letting a reader choose is that one attribute — no provider, and nothing to re-render. It is not anchored to <html> either, so putting it on any element themes that subtree.

   import '@growth-protocol-ai/alpha/styles.css';
   
   <html lang="en" data-mode={mode}>

   Copy

Lato is the design font and is not shipped. Expose --font-lato however you already load fonts, or the literal fallback resolves against your own @font-face:

var(--font-lato, 'Lato'), var(--font-nwo, 'Source Sans Pro'), -apple-system, BlinkMacSystemFont, Helvetica, sans-serif