---
title: Installation
description: How to install and set up Chakra UI in your project
tags: ['principles']
---

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

<PackageManagers
  command={{
    npm: 'npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion',
    yarn: 'yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
    pnpm: 'pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
    bun: '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.

```jsx live=false
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](https://v1.chakra-ui.com/guides/first-steps).

### ChakraBaseProvider

As of `v2.4.2` there is now the addition of `ChakraBaseProvider`. This is a
minimal version of `ChakraProvider` that only supplies theme tokens and not the
default component theming.

One of the biggest causes of the large initial JS payload is the size of the
component themes. With the following approach, you get to apply the default
themes for just the components you need by using `extendBaseTheme`.

```jsx live=false
import {
  ChakraBaseProvider,
  extendBaseTheme,
  theme as chakraTheme,
} from '@chakra-ui/react'

const { Button } = chakraTheme.components

const theme = extendBaseTheme({
  components: {
    Button,
  },
})

function App() {
  return (
    <ChakraBaseProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraBaseProvider>
  )
}
```

> 🚨 You must use `extendBaseTheme` for this to work

## Framework Guide

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

<FrameworkLinks />

## 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.

<FeaturesCourses />

## 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.

<JoinCommunityCards />