Installation

To use Chakra UI in your project, run one of the following commands in your terminal:

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

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

pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

bun add @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx, index.tsx or App.jsx depending on the framework you use.

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

Version 2 of Chakra UI is only compatible with React 18. If you are still needing to use React 17 or earlier, please use version 1 of Chakra UI.

Framework Guide#

Chakra UI works in your favorite framework. We've put together step-by-step guides for these frameworks:

Bundle Size Optimization#

This is an optional step and only required for apps that really need to finetune their bundle size.

The biggest causes of the large initial JS payload is the size of the component themes. The chakra provides design tokens and component themes.

To reduce the bundle size, use only the design tokens and customize your own components on a case-by-case basis.

import { baseTheme } from '@chakra-ui/theme'
import { Provider } from '@chakra-ui/react/provider'

function App() {
  return (
    <Provider theme={baseTheme}>
      <Component {...pageProps} />
    </Provider>
  )
}

Learn#

Watch our official courses and dive into dozens of videos that will teach you everything you need to know about Chakra UI, from basics to advanced concepts.

Egghead Course

Chakra UI for beginners

Contribute#

Whether you're a beginner or advanced Chakra UI user, joining our community is the best way to connect with like-minded people who build great products with the library.