Chakra UI will be today’s choice for styling. The Chakra UI website describes the library as

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

It’s such a helpful push in the right direction with accessibility and speed-to-start for getting projects up and running!

<aside> 💡 If you’re interested in learning more about Chakra UI you can visit the docs or check out this awesome (and free!!!) course by Lazar Nikolov

</aside>

First we’ll need to install a few packages.

npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application.

Go to pages/_app.js and wrap the Component with the Provider component.

It’ll look like this 👇

// /pages/_app.js

import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

We can now import and use some really helpful components from the ChakraUI library as we quickly finish building out the base of our portfolio.