Post
Ask Question

How To Integrate Chakra UI In React Application

Creating a great user experience is never an easy task. So most of the time we prefer to use existing UI libraries to reduce the time and increase productivity. In this article, we are going to learn about Chakra UI and also build a react application using Chakra UI components. We are going to use some of the components of Chakra UI in our application to see how easy it is to build a great UI. 
 
In this article, I am going to cover the below points,
  • What is Chakra UI? 
  • Create a React App
  • Setup Chakra UI in React App
  • Create a Navbar with Chakra UI Components
  • Adding Dark mode functionality

What is Chakra UI?

 
According to documentation,
 
Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.
 
Chakra UI is another great modular component library for React which uses Emotion and Styled System. It consists of a wide range of reusable React components that can make the life of a developer easy. Chakra UI has some design principals which you can check here.
 
Special things about Chakra UI 
  • Chakra UI has out of the box support for themes. You can customize themes very easily.
  • It has out of the box support for Dark Mode.
  • It is based on Styled Systems. It has the support of Emotion a CSS-in-JS library.
  • Chakra UI consists of lots of components

Create a React App

 
Prerequisites
  • We should have a basic knowledge of HTML and ReactJS.
  • Visual Studio Code installed
  • Node and NPM installed
Open a command prompt or your favorite terminal and type the below command to create a react app.
  1. npx create-react-app react-chakarui-app
After successfully creating the app go to the new app.
  1. cd react-chakarui-app
To see how it look likes type the below command.
  1. npm start
and it will start the development server and navigate you to http://localhost:3000/
 
You can see the default landing page,
 
How To Integrate Chakra UI In React Application
 

Setup Chakra UI in React App

 
Install Chakra UI in our new react app and its peer dependencies,
  1. npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming  
Open our new app in Visual Studio code. Chakra UI has great theming support so open index.ts and import ThemeProvider and CSSReset component and apply at the root level. Chakra UI exports a CSSReset that'll remove browser default styles.
  1. import React from 'react';  
  2. import ReactDOM from 'react-dom';  
  3. import './index.css';  
  4. import App from './App';  
  5. import * as serviceWorker from './serviceWorker';  
  6. import { theme, ThemeProvider, CSSReset } from "@chakra-ui/core";  
  7.   
  8.   
  9. ReactDOM.render(  
  10.   <ThemeProvider theme={theme}>  
  11.     <CSSReset />  
  12.     <React.StrictMode>  
  13.       <App />  
  14.     </React.StrictMode>  
  15.   </ThemeProvider>,  
  16.   document.getElementById('root')  
  17. );  
  18.   
  19. serviceWorker.unregister();  

Create a Navbar with Chakra UI Components

 
Now create a new React component called Navbar.js. To create navbar we are using below Chakra UI components,
  • Button
  • Flex
  • Box
  • Text 
Open Navbar.js file and add the below code,
  1. import React from "react";  
  2. import {  
  3.     Box,  
  4.     Heading,  
  5.     Flex,  
  6.     Link  
  7. } from "@chakra-ui/core";  
  8.   
  9. const MenuItems = ({ children }) => (  
  10.     <Link mt={{ base: 4, md: 0 }} mr={6} display="block">  
  11.         {children}  
  12.     </Link>  
  13. );  
  14.   
  15. const Navbar = props => {  
  16.   
  17.     return (  
  18.         <Flex  
  19.             as="nav"  
  20.             align="center"  
  21.             justify="space-between"  
  22.             wrap="wrap"  
  23.             padding="1.5rem"  
  24.             bg="gray.900"  
  25.             color="teal.300"  
  26.             borderBottom="1px solid black"  
  27.             {...props}  
  28.         >  
  29.             <Flex align="center" mr={5}>  
  30.                 <Heading as="h1" size="lg" letterSpacing={"-.1rem"}>  
  31.                     Chakra UI & React  
  32.                 </Heading>  
  33.             </Flex>  
  34.   
  35.             <Box  
  36.                 display="flex"  
  37.                 width="auto"  
  38.                 alignItems="center"  
  39.                 flexGrow={1}  
  40.                 color="teal.300"  
  41.             >  
  42.                 <MenuItems>Home</MenuItems>  
  43.                 <MenuItems>Blogs</MenuItems>  
  44.                 <MenuItems>About</MenuItems>  
  45.                 <MenuItems>Contact</MenuItems>  
  46.             </Box>  
  47.         </Flex>  
  48.     );  
  49. };  
  50.   
  51. export default Navbar;  
Chakra UI provides the below layout utilities,
  • Stack makes it easy to group elements together and apply a space between them.
  • Flex combines/wraps everything in a Flexbox container.
  • Grid combines/wraps everything in a CSS Grid container.
  • Box is simple a div element for receives style props. 
Box component is a very abstract component on top of which all other Chakra UI components are built. By default, it renders a div element. Flex is nothing but Box with display:flex. So with the help of Flex, we can arrange elements and assign proper spacing in it. 
 
We have created MenuItems components which use Text component of Chakra UI to show text. Now open App.js and import Navbar component in it and also we are showing logos.
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import chakraui from './chakraui-logo.svg';  
  4. import './App.css';  
  5. import Navbar from './Navbar';  
  6. import {  
  7.   Box,  
  8.   Heading  
  9. } from "@chakra-ui/core";  
  10.   
  11. function App() {  
  12.   return (  
  13.     <div>  
  14.       <Navbar />  
  15.       <div>  
  16.         <div className="container" style={{ display: 'flex', height: '200px', marginTop:'100px',alignItems: 'center' }}>  
  17.           <div style={{ width: '20%' }}>  
  18.             <img src={logo} className="App-logo" alt="react-logo" />  
  19.           </div>  
  20.           <div style={{ flexGrow: '1' }}>  
  21.             <img src={chakraui} className="App-logo" alt="chakarui-logo" />  
  22.           </div>  
  23.         </div>  
  24.       </div>  
  25.       <Box color="teal.500">  
  26.         <Heading>React JS & Chakra UI App</Heading>  
  27.       </Box>  
  28.     </div>  
  29.   );  
  30. }  
  31.   
  32. export default App;  
Now run the app and see the output,
 
How To Integrate Chakra UI In React Application
 

Adding Dark Mode functionality

 
Chakra UI has out of the box support for Dark mode. So to implement it Chakra UI provides a hook called useColorMode which we will use to changes the application's color mode. It stores the value in local storage and when the page is loaded it uses that value. To enable color mode within our app, we have to wrap our application in a ColorModeProvider.
 
Open index.js and import ColorModeProvider from the Chakra UI library and wrap our App component.
  1. import React from 'react';  
  2. import ReactDOM from 'react-dom';  
  3. import './index.css';  
  4. import App from './App';  
  5. import * as serviceWorker from './serviceWorker';  
  6. import { theme, ThemeProvider, CSSReset, ColorModeProvider } from "@chakra-ui/core";  
  7.   
  8.   
  9. ReactDOM.render(  
  10.   <ThemeProvider theme={theme}>  
  11.     <ColorModeProvider>  
  12.       <CSSReset />  
  13.       <React.StrictMode>  
  14.         <App />  
  15.       </React.StrictMode>  
  16.     </ColorModeProvider>  
  17.   </ThemeProvider>,  
  18.   document.getElementById('root')  
  19. );  
  20.   
  21. serviceWorker.unregister();  
Now open Navbar.js and import useColorMode hook from the library and also add one IconButton to toggle the theme. 
  1. import React from "react";  
  2. import {  
  3.     Box,  
  4.     Heading,  
  5.     Flex,  
  6.     Link,  
  7.     useColorMode,  
  8.     IconButton,  
  9. } from "@chakra-ui/core";  
  10.   
  11. const MenuItems = ({ children }) => (  
  12.     <Link mt={{ base: 4, md: 0 }} mr={6} display="block">  
  13.         {children}  
  14.     </Link>  
  15. );  
  16.   
  17. const Navbar = props => {  
  18.     const { colorMode, toggleColorMode } = useColorMode();  
  19.     return (  
  20.         <Flex  
  21.             as="nav"  
  22.             align="center"  
  23.             justify="space-between"  
  24.             wrap="wrap"  
  25.             padding="1.5rem"  
  26.             bg={colorMode === "light" ? "gray.900" : "teal.500"}  
  27.             color={colorMode === "light" ? "teal.300" : "white"}  
  28.             borderBottom="1px solid black"  
  29.             {...props}  
  30.         >  
  31.             <Flex align="center" mr={5}>  
  32.                 <Heading as="h1" size="lg" letterSpacing={"-.1rem"}>  
  33.                     Chakra UI & React  
  34.                 </Heading>  
  35.             </Flex>  
  36.   
  37.             <Box  
  38.                 display="flex"  
  39.                 width="auto"  
  40.                 alignItems="center"  
  41.                 flexGrow={1}  
  42.                 color={colorMode === "light" ? "teal.300" : "white"}
  43.             >  
  44.                 <MenuItems>Home</MenuItems>  
  45.                 <MenuItems>Blogs</MenuItems>  
  46.                 <MenuItems>About</MenuItems>  
  47.                 <MenuItems>Contact</MenuItems>  
  48.             </Box>  
  49.             <Box  
  50.                 display="block"  
  51.                 mt={{ base: 4, md: 0 }}  
  52.             >  
  53.                 <IconButton  
  54.                     bg="transparent"  
  55.                     aria-label="toggle color mode"  
  56.                     icon={colorMode === "light" ? "moon" : "sun"}  
  57.                     onClick={toggleColorMode}  
  58.                     color="white"  
  59.                 />  
  60.             </Box>  
  61.         </Flex>  
  62.     );  
  63. };  
  64.   
  65. export default Navbar;  
Now run the app and check whether we can toggle the color mode.
 
How To Integrate Chakra UI In React Application
 

Conclusion

 
In this article, I have explained about Chakra UI and how to integrate it in React applications. Also, I demonstrated how to create a simple navbar and added dark mode easily using Chakra UI. I really hope that you enjoyed this article, share it with friends, and please do not hesitate to send me your thoughts or comments.
 
You can follow me on twitter @sumitkharche01
 
Happy Coding!!


Similar Articles