Chakra library

in this tutorial, we will be using chakra as our UI framework

https://chakra-ui.com/guides/getting-started/cra-guide

Install Chakra using NPM

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Add Chakra provider into your index.js

// 1. Import the extendTheme function
import { extendTheme, ChakraProvider } from '@chakra-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 })

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