Skip to main content
⌘K
Last modified: 24/Jun/2024

Set Stratus up and running

We strive to make Stratus as easy to use as possible. Nevertheless, you have to go through a few steps to be able to use it in your project. Bare with us.

#1. Obtain a token

We use GitHub Packages to distribute Stratus. In order to access them, you will need a Personal Access Token. You can easily generate it yourself. Alternatively, you can use the token stored in 1Password.

#2. Setup your environment

Set the token as an environment variable, named NPM_TOKEN. On macOS, you can do this with a simple one-liner:

echo "\export NPM_TOKEN=my_personal-access-token" >> ~/.zshrc && source ~/.zshrc

#3. Install the main Stratus package

Use your preferred package manager to add the @kinsta/stratus package latest version.

#4. Utilize the main context provider component

Wrap your application into our context provider, like this:

import { StratusProvider } from '@kinsta/stratus'

export const MyPreciousApp = () => (
  <StratusProvider language="en">
    <MyContent />
  </StratusProvider>  
)

#5. Change language

To change the language of the Stratus components you need to call the onChangeLanguage method pragmatically in a child component of the StratusProvider.

import { Button, I18nContext } from '@kinsta/stratus'

const MyContent = (): JSX.Element => {
  const { onChangeLanguage } = useContext(I18nContext)

  return (
    <>
      <button onClick={() => onChangeLanguage('de')}>change langugae</button>

      <Button isLoading={isLoading}>Hello World!</Button>
    </>
  )
}

This component provides tools for internationalization and sets global styling, so you have to use it, otherwise your code will break.

#Troubleshooting

If you have problems during the installation, you can read a troubleshooting article here.

#Next up