NPM installation instructions

Install Saas UI Pro components from the private NPM registry using NPM.

In the next steps we'll show you how to install @saas-ui-pro/react in new or existing projects. You'll need a valid license to install Pro, you can order one here.

Before continuing follow these steps to set up @saas-ui/react and @chakra-ui/react in your project, if you haven't done so already.

Configuration#

All pro packages can be installed from our private NPM registry at https://npm.saas-ui.dev. After redeeming your license, an account will be automatically created.

Your NPM account is a combination of the Github username (in lower case) you used to redeem your license and the license code (username:license-key). This key can be shared across your team members.

Your token

Encoded token

Configuration is slightly different for each package manager, so it's important to follow the steps for the package manager you are using in your project.

NPM#

In your project root folder you can run this and enter your Github username as user and license key as password.

npm login --registry=https://npm.saas-ui.dev/ --scope=@saas-ui-pro

Now run npm i @saas-ui-pro/react to install the Pro components.

Manual & CI configuration.#

The following steps are required to deploy your project or run it on CI.

NPM expects auth to be base64 encoded, so make sure SAAS_UI_TOKEN is encoded.

echo -n 'GithubUsername:licenseKey' | base64

Add your auth token to shell profile ~/.bash_profile and add it to environment variables of your deployment or CI.

export SAAS_UI_TOKEN="base64 encoded token"

If you configure this on your local machine, make sure the restart your terminal or run source ~/.bash_profile, to make sure the token is loaded.

If you're having troubles generating a working base64 encoded string, try this website.

Then edit .npmrc in the root of your project and add the following lines.

@saas-ui-pro:registry=https://npm.saas-ui.dev
//npm.saas-ui.dev/:_auth="${SAAS_UI_TOKEN}"
//npm.saas-ui.dev/:always-auth=true

Now run npm i @saas-ui-pro/react to check if the configuration was succesful.

Was this helpful?