Integrating Chakra UI into React

Chakra UI can be added to a React application by installing the core package and its required styling dependency. Run the following command in the root of a Vite-based React project:

npm install @chakra-ui/react @emotion/react

After installation, the application must be wrapped with a provider component to enable Chakra UI's styling system. This provider supplies styling context to all components and must be placed at the root of the app.

Create a provider file and compose Chakra's provider:

// src/components/ui/provider.jsx
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"

export function Provider({ children }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ThemeProvider attribute="class">
        {children}
      </ThemeProvider>
    </ChakraProvider>
  )
}

Wrap the application with this provider:

// src/main.jsx
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { Provider } from "@/components/ui/provider"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
)