Hi Devs, hope you're all doing great! We are going to be discussing ChakraUI. I want to clear some misconceptions about **ChakraUI**. I'm not working for **ChakraUI**. I'm also not an ambassador for Chakra, these are just the experience and some research I have made on the library. No doubt, there are a lot of **component libraries** based on React in 2022. Therefore, picking the best might be hard to find but picking one that will save you stress shows how creative you are as a Frontend developer. I'm not here to praise any **React** component library, but here to talk about my experience using **ChakraUI**. I know you are familiar with some of the best component libraries based on React out there. E.g - Mantine (Very close to chakra-UI). - MUI (Formally Material-UI). - Tailwind (ChakraUI Inspiration). - DaisyUI - And lot more... ## What is ChakraUI **ChakraUI**, as it states is a **simple**, **modular** and **accessible** component library that gives you the building blocks you need to build your **React** applications. The words **'simple, modular and accessible'**, ringed a bell to me when I was looking around for a component library more like tailwind in the react world. I personally love tailwind, but I thought to myself that I don't want to write a logic in my code just to open a modal or do some simple component logic stuffs. I just want to have a nice-looking library that does that for me. ## Features of ChakraUI As stated on **ChakraUI's** documentation: ![ChakraUI features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeq0wprk1tz34mp090id.png) If your preferred component library cannot offer you the first 5 on the list, I bet it is not a complete component library. In this way, **ChakraUI** shines. especially the fact that i can compose components differently as if it was designed by two different entities. ## ChakraUI vs Tailwind Without doubt, **ChakraUI** picked it inspiration from **TailwindCSS**. I'm really excited it did. Last year, I worked on a project on React where we used **Tailwindcss**. Building with it was fun, but we have one goal in mine, which was: _we do not want to waste time on the UI of our app_. Using Tailwind was like stressful for us, because we had to build the components, pass props, manage their states and the likes.We found ourselves writing another component library. We found ourselves doing this: ``` import { forwardRef, Ref, ElementType } from "react"; import { classNames } from "../../utils/functions"; import { ButtonBase, ButtonBaseProps } from "../base/buttonBase"; import { ImSpinner8 } from "react-icons/im"; import { SrOnly } from "../base/srOnly"; import { ButtonProps } from "../../utils/interfaces"; function Button

( { className, children, loadingText = "Loading...", groupHoverAnimation, animateOnHover = false, id, onClick, size = "md", isDisabled = false, isFullWidth = false, isLoading = false, leftIcon, rightIcon, iconSpacing = "md", ariaLabel, ...props }: ButtonProps & ButtonBaseProps

, ref: Ref ) { const sizeType = size === "xs" ? "btn-xs" : size === "sm" ? "btn-sm" : size === "md" ? "btn-md" : size === "lg" ? "btn-lg" : null; const iconSize = size === "xs" ? "text-[12px]" : size === "sm" ? "text-[14px]" : size === "md" ? "text-[16px]" : size === "lg" ? "text-[18px]" : null; const groupHoverAnimationType = groupHoverAnimation === "grow" ? "group-hover:animate-grow" : groupHoverAnimation === "roll" ? "group-hover:animate-roll" : groupHoverAnimation === "wiggle" ? "group-hover:animate-wiggle" : null; const iconSpacingType = iconSpacing === "sm" && leftIcon ? "mr-1" : iconSpacing === "md" && leftIcon ? "mr-1.5" : iconSpacing === "lg" && leftIcon ? "mr-2" : iconSpacing === "xl" && leftIcon ? "mr-3" : iconSpacing === "sm" && rightIcon ? "ml-1" : iconSpacing === "md" && rightIcon ? "ml-1.5" : iconSpacing === "lg" && rightIcon ? "ml-2" : iconSpacing === "xl" && rightIcon ? "mr-3" : null; const animateOnHoverType = animateOnHover ? "btn-animate" : null; const isFullWidthType = isFullWidth ? "w-full" : "w-[max-content]"; return ( {leftIcon && ( )} {isLoading && ( )} {isLoading && loadingText ? loadingText : children} {rightIcon && ( )} {ariaLabel && {ariaLabel}} ); } export default forwardRef(Button) as typeof Button; ``` Obviously, there's nothing bad here, except you find a bug devs!😉😉😉. We want to achieve some features here, **`Accessibility`, `Theming`, `Composable`, `Light and Dark features`** and so on. Nice work from my colleagues [MoyoHussien](https://github.com/moyohussein). This is not even the `baseButton` component, this is the main button component, we have a `baseButton` component also. We found ourselves writing a lot and there's no time on our side. The funny thing is that we knew about **ChakraUI**, but we were thinking it is not flexible like **TailwindCSS**. Yes! I agree it is not, but it is very close. You might disagree with me dev, but please if your goal is to build fast, go with `ChakraUI` and thank me later. ## ChakraUI Ships more Javascript I have seen series of posts and video, saying chakra-ui ships more **javascript**, due to the fact that it uses **javascript** not **css**. Lol!. What do you except from a React component library? Let's break it down, Javascript -> Typescript -> React -> ChakraUI Why won't it ship Javascript and on top of that, it's also really small (375kB minified, 101kB minified, and gzipped, although you should remember that besides the core Chakra library you have to install Emotion). Note: I'm not been payed by **ChakraUI** or anyone, this is just my own opinion. In the next series, we will continue from here. One love from Nigeria.! This is my First post on DevTo. ## Getting Started with ChakraUI ....

iamabdulazeez

Why you should start using ChakraUI (Part 1).

Join Our Newsletter. No Spam, Only the good stuff.