Set up Chakra UI to work with Next.js

Share this video with your friends

Send Tweet

In this lesson, we will learn how to set up and use Chakra UI with Next.js.

We'll use Chakra UI to customize the way Next.js styles every page in our application by defining a _app.tsx file. We'll wrap our app in the ThemeProvider that Chakra gives us as well as use CSSReset to reset the default browser styling.

After this initial set up, you'll see how easy it is to start styling pages with Chakra by using components like Heading, Link, and Flex exposed from the core package.

Karthik Radhakrishnan
Karthik Radhakrishnan
~ 4 years ago

As of Chakra v1, for those who might face issue with setup - I had some issue with the emotion/chakra v1 as the core package is no more compatible and instead follow this upgrade doc for installation: https://chakra-ui.com/docs/migration

PS.: ThemeProvider needs to be ChakraProvider and framer-motion is required as dependency as well.