Open In App
Related Articles

How to Implement Chakra UI in ReactJS ?

Improve Article
Save Article
Like Article

Chakra UI is a powerful component library for React that is designed and developed by Segun Adebayo to build front-end applications. The Chakra UI comes with simple yet easy-to-understand documentation that gives us guidelines on how to build a reusable component, thereby reducing the time spent on building the process while focusing on other aspects of the app. 

Key features of Chakra-UI are:

  • Minimalistic
  • Styled-system
  • Reusability
  • Responsiveness



To Implement Chakra UI in ReactJS we will implement the Dark Mode switch, Chakra UI provides a React hook called useColorMode that gives us access to the color mode as well as the toggle color mode. This hook stores the color mode in localStorage and uses that value when the page is loaded. To make sure that our color mode is enabled we need to add ColorModeScript to the index.js file. The value of ColorModeScript is set to light.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command.

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

Project Structure:

Project Structure

The updated dependencies in package.json file

"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^4.1.17",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

Example: This example uses colorModeScript from the Chakra UI and useColorMode hook to implement the Dark theme in the application


// Filename - index.js
import {
} from "@chakra-ui/react";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
            <ColorModeScript initialColorMode="light"></ColorModeScript>
            <App />


// Filename - App.js
import { IconButton } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import {
} from "@chakra-ui/layout";
import { FaSun, FaMoon } from "react-icons/fa";
function App() {
    const { colorMode, toggleColorMode } = useColorMode();
    const isDark = colorMode === "dark";
    return (
            <Flex w="100%">
                    icon={isDark ? <FaSun /> : <FaMoon />}
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 16 Nov, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials