🕛 Getting Started

Installing Chakra UI

To install Chakra UI on your website (regardless of the framework), you will need to add the packages either via yarn or npm. Navigate to the root of your project.

Installing Chakra UI Via Yarn

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Installing Chakra UI Via NPM

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

We are also installing @emotion/react, @emotion/styled and framer-motion because Chakra UI depends upon them.

Chakra Provider

Now that we have the packages installed, we need to wrap our app with ChakraProvider. Please follow along with your framework below as each one is different.

React And ChakraProvider

1. Navigate to the root of your react app.

2. Add the following code:

   import * as React from "react";
   
   // 1. import `ChakraProvider` component
   import { ChakraProvider } from "@chakra-ui/react";
   
   function App({ Component }) {
     // 2. Use at the root of your app
     return (
       <ChakraProvider>
         <Component />
       </ChakraProvider>
     );
   }
   

Next.js And ChakraProvider

1. Open _app.js

2. Add the following code:

   import { ChakraProvider } from "@chakra-ui/react"
   
   function MyApp({ Component, pageProps }) {
     return (
       <ChakraProvider>
         <Component {...pageProps} />
       </ChakraProvider>
     )
   }
   export default MyApp
   

Gatsby And ChakraProvider

1. Add the @chakra-ui/gatsby-plugin

npm i @chakra-ui/gatsby-plugin

...... or ......

yarn add @chakra-ui/gatsby-plugin

🎉 Chakra UI is now ready to use! 🎉

Optional Packages

There are 2 optional packages you can install.

Chakra Icons

Chakra UI does have its own icon pack! Although it is small, it offers some common icons that look minimalistic. To use these icons we must install the icons.

yarn add @chakra-ui/icons

// or

npm i @chakra-ui/icons

Theme Tools

This package is meant to make it easier for you to customize components or build your own design system. This is an advanced feature and in most cases is not necessary. However, if you are so inclined, you can add the package, again via yarn or npm.

yarn add @chakra-ui/theme-tools

// or

npm i @chakra-ui/theme-tools

Using Chakra UI With TypeScript

According to the Chakra UI docs, when using TypeScript a minimum TypeScript version of 4.1.0 is required.