Leveraging Chakra UI to Create a Responsive Portfolio Website

Chakra UI is a component-based library that allows developers to insert reusable components into a React application. Chakra UI components are accessible, flexible, and easy to implement.

Before getting started with Chakra, confirm Node.js is installed on your local machine.

node -v

If Node.js is not installed, follow these download instructions before continuing.

Using Chakra UI Components

Step 1: Install Chakra inside of your create-react-app application using npm

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

Step 2: Set up the Chakra Provider in the root of your project directory

If you created your project using create-react-app, navigate to the index.js file and wrap the Chakra Provider around the App component. The Provider allows Chakra components to communicate with each other and have consistent styling.

Don’t forget to import the ChakraProvider!

Step 3: Begin Adding Chakra UI components to your application

I also used React Icons, which allow you to import specific icons.

npm install react-icons –save

Let’s break down what is going on inside the App component above:

Imports

{ IconButton }: Chakra button component which only displays an icon when rendered

{ useColorMode }: React hook which gives access to the current colorMode (‘light’ or ‘dark’) and a function to toggle the colorMode (ToggleColorMode)

{ FaSun, FaMoon }: Icons imported from React Icons

{ VStack, Flex, Heading }: Chakra layout components

• VStack adds vertical spacing and centers the element
• Flex creates a box (div) with a flex display
• Heading creates a box and renders <h2> tag by default

And now, within a matter of minutes, we have an application that can switch between light and dark mode, with the click of an icon.

Light mode

Dark mode

As you’ve seen, the Chakra UI component library makes it extremely convenient to import reusable components. In this example, we utilized Chakra layout and form components (IconButton) as well as the useColorMode hook. Chakra has a ton of components, from theming to data display to feedback and I encourage you to continue to explore!

Resources:

Chakra Documentation: chakra-ui.com

mtechviral: https://www.youtube.com/watch?v=dj6rPuWXoQM