Vite

1. Installation

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

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

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

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:

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>
);

note

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.

// 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>
);

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:

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

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

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