Getting started

Before we start

Make sure you've got Node and optionally Yarn. Your package.json should contain following dependencies: react, react-dom and styled-components

Installation

In your project's root, run the following command in your Terminal:

Pick one of the two below.

Using Yarn

$ yarn add insites-ui typeface-inter

Using NPM

$ npm i insites-ui typeface-inter

ThemeProvider (for basic React apps and Create React App)

When your package manager finished installing insites-ui, you should add ThemeProvider to your project. Place the ThemeProvider as high in JSX structure as you can. It can be for example a layout component.

// /src/layouts/Default.js
import { ThemeProvider, theme } from 'insites-ui'

const DefaultLayout = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  )
}

export default DefaultLayout

If you are using Gatsby, please refer to this guide.

Install font

Our framework uses Inter typeface (Thank you @rsms for developing it!). To use the typeface simply require it at the top of App.js (for Gatsby: gatsby-browser.js and gatsby-ssr.js).

// /src/App.js
require('typeface-inter')

If you'd like a different font, you can customize the theme.

That's it 🎉

Now you can use the components from insites-ui.