Vite
1. Installation#
In your Vite React project, install Chakra UI by running either of the following:
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
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 * 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.
// 1. Import the extendTheme functionimport { extendTheme } from '@chakra-ui/react'import * as ReactDOM from 'react-dom/client'// 2. Extend the theme to include custom colors, fonts, etcconst 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
orvite.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 |