Getting started with Chakra UI

Background

I found this elegant UI design by Glory Folake on LinkedIn and I decided to bring it to life over the weekend. I have been following the development of Chakra UI for some months now and version 1.0 just shipped.

Build accessible React apps with speed

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications - Chakra UI

Getting started with Chakra UI is as simple as running

"npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion"

# or

"yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion"

And there are also prebuilt templates you can use if you are starting a new project either with Create React App or Next JS. For this development, I choose Next Js and the Chakra UI documentation is pretty hands-on and shows step by step how to get started.

All you need to get started with Chakra UI after installation is to update your "_app.js" with the above Code. Chakra UI is can be likened to Tailwind CSS for React with many reusable components already built out for you. And on top of that, it has accessibility built-in. And it built with extensibility in mind, every part of the component is customizable which is really great especially if you are building a design system for a medium to a big project.

In the above code, you will see how we define a brand color, this brand color is passed to ChakaProvider and make available throughout the project.

The Above code generated the component bellow

Let take a look at how to create a simple Button Component.

import React from "react";
import { Button } from "@chakra-ui/react";
import { HiSun } from "react-icons/hi";

export default function IconButton() {
  return (
    <Button
      bg="brand.900"
      textColor="#fff"
      px="3"
      py="2"
      width="222.79px"
      h="71.17px"
      borderRadius="30px"
      fontSize="26px"
      fontWeight="900"
      leftIcon={<HiSun />}
    >
        
       Dark
    </Button>
  );
}

Conclusion

Chakra UI is really great and it's been adopted by more organizations in production. I think where Chakra UI will really shine is when you are building a design system that provides a common component throughout the organizations. There are great best practices built into it that will foster collaboration and they give great details in their documentation on how to adapt it for big projects and teams. Finally, dark mode is built-in, how cool is that.

This is the link to other components I was able to create, took me just a few hours of just going through the documentation and building this out. I am looking forward to extending this in the future and take advantage of the awesome patterns and APIs Chakra provides for building a highly customizable and extendable design System.

Resources

Chakra UI Documentation

Final Components Preview

Tailwind CSS