Getting Started

Installation#

Inside the React project directory, setu Chakra UI, and Workpay Design Theme by running the following:

yarn add @chakra-ui/react@next framer-motion @workpay/theme
# or
npm i @chakra-ui/react@next framer-motion @workpay/theme

Setup Provider#

For Workpay Theme to work correctly, you need to setup the ChakraProvider and workpay-design/theme at the root of your application.

Go to the root of your application and do this:

import * as React from 'react';
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react';
// 2. import `Workpay Theme` object
// import { theme } from "@workpay/theme"
function App() {
    // 3. Wrap your app and pass in the workpay theme.
    // 4. Pass the in the resetCSS to enable Chakra UI's <CSSReset /> component
    return (
        <ChakraProvider>
            <App />
        </ChakraProvider>
    );
}

• For Next.js, you need to set this up in pages/_app.js or pages/_app.tsx
• For Gatsby, install the gatsby-plugin-chakra-ui. It does it automatically for you.
• For Create React App, you need to set this up in index.js or index.tsx

Notes on TypeScript 🚨#