Installation

Outkit is a private package published to the Github Package Registry. Because of this, you must login to the Github Package Registry before you can install Outkit to your project. There are 2 ways to do this:

a) Logging in to NPM

npm login --registry=https://npm.pkg.github.com --scope=@outfitio

b) Installing via .npmrc

Create an .npmrc file in the root of the project (same level as package.json) and paste the following content:

registry=https://npm.pkg.github.com/outfitio
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

Be sure to place ${GITHUB_TOKEN} with your Github Personal Access Token.

Add like any other package

npm install --save @outfitio/outkit

Add the Theme Provider and Global CSS Styles to your App

After you have installed @outfit/outkit, it can be used in your project like any other package.

You will need to add the ThemeProvider and GlobalStyles components to your project. Be sure to add this code as high in the component tree as possible

import React from 'react';
import { GlobalStyles, ThemeProvider } from '@outfitio/outkit';

function App(props) {
  return (
    <ThemeProvider>
      <GlobalStyles />
      <div>{...}</div>
    </ThemeProvider>
  );
}

GlobalStyles will add a CSS Reset, import the required fonts and apply some styles to the body. These can all be disabled by props. For more information, please see GlobalStyles.

ThemeProvider can take a theme object as a prop. This is really useful for white labeling. For more information, please see White Labeling.