Install and Setup Chakra UI in a React Project
In this lesson, you'll learn how to install Chakra UI in a blank Next.js project, create a custom App override. Additionally, you will learn how to use the Chakra Provider to set up Chakra UI.
Here are the Figma files that we'll use throughout the course.
Lazar Nikolov: [0:01] In this lesson, we're going to install Chakra UI into a new Next.js project. With me, I have a blank Next.js project with TypeScript. I've removed all of the files and folders except for the index.tsx file. Let's make sure that everything works by running yarn dev.
[0:17] OK. The app works. Let's install the Chakra UI packages. We're going to do yarn add. Then, add chakra-ui/react, emotion/react, emotion/styled, and framer-motion. These are dependencies to Chakra UI. We need to install them in order everything to work fine.
[0:45] Now, to set up Chakra UI, we need to create a new file called _app.tsx into the pages directory. In there, we're going to import the AppProps from 'next/app'.
[0:58] We're going to create our App and do export default App.
[1:05] We're going to get the AppProps, which will be the Component and the pageProps, and return that Component with the pageProps spread to it. If we run this, there will be no changes.
[1:22] Nice. Now, let's add the ChakraProvider. We're going to import the ChakraProvider from chakra-ui/react. Then, we're going to wrap the Component with the ChakraProvider.
[1:41] If we run this now, we can see that the font changes. There we go. Now, Chakra UI is successfully installed. Let's recap. First, we installed the Chakra UI packages. Then we override the default Next.js app. Then, we wrap the Component with the ChakraProvider.