Hello, David here. In this article, I will be going over my experience with using ChakraUI and why I think it is extremely beneficial to learn. Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. ChakraUI can also be used by a variety of JavaScript Frameworks such as Vite, Redwood, Next, Gatsby, Blitz and Remix. ChakraUI also supports the use of TypeScript in your project and have guidelines on how to use it in their documentation.

ChakraUI not only aids you in pre-designing components, but also helps you make styling much easier by adopting a component-based styling system. ChakraUI does not take care of the styling for you, but it does make it easier to style and design.

I will now give two examples, one, just be a plain div, and the other, a ChakraUI generated component:

<div style={{ color:"red", fontSize:"24px", width:"90%", margin:"0 auto"}}>This is a box</div>

import {Box} from '@chakra-ui/react'
<Box color="red", fontSize="24px", width="90%", margin="0 auto">This is a box</Box>

So which do you prefer? As you can see in the code sample above, ChakraUI makes styling easier.

The difference between the two code samples is that instead of using a style object like in plain React, ChakraUI adopts a different way of styling in which the styles become the props of the components. For example, you can set a width by using the width prop or you can just use the "w" prop, both accomplish the same goal.

ChakraUI enables you to spend less time writing UI code and more time building a great experience for your users.

ChakraUI has many perks to it that makes it a great tool to use:

1. Light and Dark UI
2. Theme-able
3. Spend less time writing UI code

I will explain each perk individually to show you how efficient ChakraUI can be.

Light and Dark UI

ChakraUI makes designing a dark theme UI very simple. It optimizes for multiple color modes. It comes with a built-in color mode switcher component, which makes switching between light and dark theme intuitive and straightforward. You do not have to trouble yourself with manually creating dark theme functionality because ChakraUI does most of the work for you. All components are compatible with light and dark mode. You can also author your own light and dark mode experience across your application.

Theme-able

ChakraUI features easy customizability/extensibility of all global and component style defaults. New sizes or variants can be defined for each components. On top of that, you can compose new components out of existing ones or even non-ChakraUI components with Chakra Factory.

Spend less time writing UI code

Chakra UI provides prebuilt components to help you build your projects faster. There are components such as Box, Button, ListItem and others which making designing very easy. This way you don't have to spend time racking your brain trying to come up with beautiful component designs.

If you enjoy articles like this and find them useful or have any feedback, message me on Discord at davidarogunre#3034. Thanks for reading.