Create React App

A guide for installing Saas UI with create-react-app projects

Manual Installation#

1. Installation#

Inside your CRA project directory, install Chakra UI by running either of the following:

npm i @saas-ui/react @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

2. Provider Setup#

After installing Saas UI and Chakra UI, you need to set up the SaasProvider at the root of your application. This can be either in your index.jsx or index.tsx

Put in the following code:

import * as React from 'react'


// 1. import `SaasProvider` component. This wraps the `ChakraProvider` component.
import { SaasProvider } from '@saas-ui/react'


function App() {
  // 2. Wrap SaasProvider at the root of your app
  return (
    <SaasProvider>
      <App />
    </SaasProvider>
  )
}

3. Customizing Theme#

If you intend to customise the default theme object to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'


// 2. Import the Saas UI theme
import { SaasProvider, theme as baseTheme } from '@saas-ui/react'


// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}


const theme = extendTheme({ colors }, baseTheme)


// 3. Pass the `theme` prop to the `SaasProvider`
function App() {
  return (
    <SaasProvider theme={theme}>
      <App />
    </SaasProvider>
  )
}

To further customize components or build your own design system, the theme-tools package includes useful utilities. Install @chakra-ui/theme-tools.

Notes on TypeScript 🚨#

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.

Increate-react-app project, you'll need to manually upgrade typescript to ^4.1.0.

Was this helpful?