Resources / Getting started

Getting started

Four steps from an empty app to a styled ALPHA button.

Point the scope at GitHub Packages
ALPHA is published to GitHub Packages, not npmjs. The scope has to match the repository owner, so add this to your .npmrc:
```
@growth-protocol-ai:registry=https://npm.pkg.github.com
```
Authenticate once, globally
Never commit a token. A PAT with read:packages is enough:
```
pnpm config set "//npm.pkg.github.com/:_authToken" <PAT>
```
Install
```
pnpm add @growth-protocol-ai/alpha
```
react and react-dom are peers: ^18.3 || ^19.
Import the stylesheet and set the mode
Once, in your root layout — then set data-mode on <html>. Dark is the default.
```
import '@growth-protocol-ai/alpha/styles.css';

<html lang="en" data-mode="dark">
```

Fonts

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'), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Helvetica, sans-serif