How to Implement Chakra UI in ReactJS ?
Last Updated :
16 Nov, 2023
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
Prerequisites:
Approach:
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 StructureThe 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
JavaScript
// Filename - index.js
import {
ChakraProvider,
ColorModeScript,
} from "@chakra-ui/react";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<ChakraProvider>
<ColorModeScript initialColorMode="light"></ColorModeScript>
<App />
</ChakraProvider>
</React.StrictMode>,
document.getElementById("root")
);
JavaScript
// Filename - App.js
import { IconButton } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import {
Flex,
VStack,
Heading,
Spacer,
} from "@chakra-ui/layout";
import { FaSun, FaMoon } from "react-icons/fa";
function App() {
const { colorMode, toggleColorMode } = useColorMode();
const isDark = colorMode === "dark";
return (
<VStack>
<Flex w="100%">
<Heading
ml="2"
size="md"
fontWeight="extrabold"
color="blue.500"
>
GGRestro
</Heading>
<Spacer></Spacer>
<IconButton
ml={9}
icon={isDark ? <FaSun /> : <FaMoon />}
isRound="true"
onClick={toggleColorMode}
></IconButton>
</Flex>
</VStack>
);
}
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:
Similar Reads
ReactJS Chakra-UI Card Component Chakra UI, developed by Segun Adebayo, is a robust React component library with over 50 components, emphasizing accessibility, simplicity, and modularity. With concise documentation and 19.4k GitHub stars, Chakra UI, built on emoticon and styled-system technologies, accelerates front-end development
3 min read
React Chakra UI Position The Chakra UI library is a popular React UI library that helps build advanced and customizable user interfaces. One essential aspect of building UI is positioning the elements at the right positions on the screen. Prerequisites: NPM & NodeReact JSReactJS ChakraUIHTML, CSS, and JavaScriptChakra U
4 min read
ReactJS Onsen UI Card Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Card components allow the user to display content. We can use the following approach in ReactJS to use the Onsen-UI Card C
2 min read
React Chakra UI Gradient React Chakra UI Gradients allow you to add stylish and visually appealing backgrounds. Gradients are a blend of two or more colors that transition smoothly from one to another. In this article, we will learn about the implementation of the Gradients in Chakra UI. Prerequisites:NPM & NodeReactRea
2 min read
React Chakra UI Form Number Input React Chakra UI Form Number Input is a powerful and user-friendly component tailored for efficient numeric data entry in web applications. Built on the Chakra UI foundation, this component seamlessly integrates into React applications, providing developers with a simple yet customizable solution for
2 min read