---
title: Vite
description: A guide for installing Chakra UI with vitejs projects
tags: ['vite']
author: estheragbaje
category: frameworks
---

### 1. Installation

In your Vite React project, install Chakra UI by running either of the
following:

<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',
  }}
/>

### 2. Provider Setup

After installing Chakra UI, you need to set up the `ChakraProvider` at the root
of your application.

Go to the `src` directory and inside `main.jsx` or `main.tsx`, wrap
`ChakraProvider` around `App`:

```jsx live=false
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import * as ReactDOM from 'react-dom/client'

const rootElement = document.getElementById('root')
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)
```

> Boom! You're good to go with steps 1 and 2 🚀🚀🚀 However, if you'd love to
> take it a step further, check out step 3.

### 3. Customizing theme (Optional)

If you intend to customise the default theme object to match your design
requirements, you need to extend the `theme`.

Chakra UI provides an `extendTheme` function that deep merges the default theme
with your customizations.

```jsx live=false
// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'
import * as ReactDOM from 'react-dom/client'

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`

const rootElement = document.getElementById('root')
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)
```

> **⚡Quick tip:** In cases where hot reload doesn't work, first check to make
> sure you're using the latest version of Vite. If hot reload issue persists,
> use this workaround in your `vite.config.js` or `vite.config.ts` file:

```jsx live=false

server: {
    watch: {
      usePolling: true,
    },

```

Now, your `vite.config.js` or `vite.config.ts` should now look like this:

```jsx live=false
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true,
    },
  },
})
```

#### Notes on TypeScript 🚨

Please note that when adding Chakra UI to a TypeScript project, a minimum
TypeScript version of `4.1.0` is required.

### ChakraProvider Props

| Name             | Type             | Default               | Description                                         |
| ---------------- | ---------------- | --------------------- | --------------------------------------------------- |
| resetCSS         | `boolean`        | `true`                | automatically includes `<CSSReset />`               |
| theme            | `Theme`          | `@chakra-ui/theme`    | optional custom theme                               |
| colorModeManager | `StorageManager` | `localStorageManager` | manager to persist a users color mode preference in |
| portalZIndex     | `number`         | `undefined`           | common z-index to use for `Portal`                  |