Odafe's View

Demystifying Chakra UI

Demystifying Chakra UI

Odafe Alaiya's photo
Odafe Alaiya
·

9 min read

Table of contents

In the fast-paced world of web development, it becomes imperative for web developers to not only deliver fast, captivating sites but the speed of delivery of these sites cannot be over-emphasized. This is where Chakra UI comes in, offering a powerful and versatile framework, allowing developers to craft beautiful and fast User Interfaces with ease and speed.

In this article, we will discuss what Chakra UI is, its core features and capabilities and by the end you should be able to decide if Chakra UI is a good fit for your next project.

Prerequisites

This article assumes that the reader knows Basic HTML, CSS, JavaScript and ReactJs.

So what is Chakra UI?

Chakra UI is an open-source library that provides a large collection of simple and accessible components for building fast and visually appealing User Interfaces in ReactJS. This means that Chakra UI provides a set of "pre-built" components that can be used to organize the visual hierarchy of your application.

Understanding Chakra UI

To be clear Chakra UI is not a CSS library although it utilizes CSS for styling, it removes the "stress" of writing raw CSS code by providing pre-styled components with default styles. The styles of these components can then be customized to fit whatever design specification your application needs to meet. With that said here are some of the features and advantages of using Chakra UI.

Features and Advantages of Chakra UI

  • Accessibility: Chakra UI is very big accessibility, it provides accessible defaults for its components which ensures inclusivity for people with disabilities.

  • Responsive design: Chakra UI components are built with responsiveness in mind, allowing your UI to adapt to different screen sizes and devices. You can easily create responsive layouts and adjust component styles based on breakpoints.

  • Customization: One key feature of components in Chakra UI is its ability to be both reusable and customizable. This simply means that each component can be tailored to fit your exact design specification without having to sacrifice any functionality.

  • Theming: Chakra UI provides a robust theming system that allows you to customize the visual appearance of your components. You can create and switch between multiple themes and change colors, typography, spacing, and other style properties to match your project's design and branding.

  • Built-in style props: Style props are a way to alter the style of a component by adding props to it. This greatly reduces the time it takes to build components.

    The example below shows a react component making use of the Text component in Chakra UI. It uses the style props to change the font and color.

import React from "react";
import { Text } from "chakraui/react";

const NewComponent = () => {
    return (
        <Text color="#fff" fontSize="14px">
            Hello world
        </Text>
    )
};

export default NewComponent;

  • Icon library: Chakra UI also has an extensive library for managing Icons. This means that icons from popular libraries can be utilized with ease.

  • Form handling and validation: Form handling in Chakra UI is simplified by providing form components that handle form state, validation, error messages, and form submission. This helps to fast-track the development of form Intensive user Interfaces.

  • TypeScript Support: From TypeScript 3.8.0 there has been support for Chakra UI in TypeScript applications. Making it a great choice for developers who prefer or require static typing in their React projects.

  • Developer Experience: Chakra UI is designed to enhance the developer experience by providing a smooth and efficient workflow. Everything from the Installation and setup to the use of style props down to the integration with TypeScript, all work together the make the best experience for developers using this technology.

  • Comprehensive documentation and Community support: Chakra UI has extensive documentation that covers usage, customization, theming, and advanced topics. It also has an active and supportive community, where you can seek help, share ideas, and contribute to the project.

Installation and setup

  1. First, you need to install node.js on your local device. You can download it from their official site here.

  2. Once that is done we need to install Chakra UI in your ReactJs application. We do so by running the following code in our terminal.

     npm i @chakra-ui/react @emotion/react @emotion/styled framer-motio

    This Initializes your React application with Chakra UI.

  3. Now we need to set up the ChakraProvider at the root of your application. This ensures the consistency of components in your application. You can do this in your app.js, app.jsx, index.js, app.tsx, index.tsx file depending on the framework you are using.

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

Components in Chakra UI

Now that we have set up Chakra UI in our React application let us explore some of the components available in Chakra UI. As we've stated earlier, Chakra UI has a host of different components for a host of different purposes and they are grouped into various categories depending on their function. Here are some of these components:

  1. Layout: Layout components in Chakra UI are specifically designed to help you structure your application's visual hierarchy and arrange components in a visually appealing way. Some of these components are:

    • Box: The Box component is a versatile layout component that can be used as a container for other components. It provides various props to control spacing, alignment, and styling.
    import { Box } from "@chakra-ui/react";

    function MyComponent() {
      return (
        <Box bg="gray.200" p={4}>
            //"bg" specifies background and "p" specifies padding.
          {/* Content goes here */}
        </Box>
      );
    }

  • Flex: The Flex component is useful for creating flexible and responsive layouts. It uses Flexbox to arrange its child components horizontally or vertically.

      import { Flex, Box } from "@chakra-ui/react";

  function MyComponent() {
    return (
      <Flex direction="row" align="center" justify="space-between">
        <Box>Component 1</Box>
        <Box>Component 2</Box>
      </Flex>
    );
  }

  • Grid: The Grid component simply allows you to create responsive grid layouts. You can specify the number of columns and define how the grid items should be placed within the grid component.

      import { Grid, Box } from "@chakra-ui/react";

  function MyComponent() {
    return (
      <Grid templateColumns="repeat(3, 1fr)" gap={4}>
        <Box>Component 1</Box>
        <Box>Component 2</Box>
        <Box>Component 3</Box>
      </Grid>
    );
  }

  1. Media and Icons: There are also components available for handling media-related content like images, videos and icons consistently and conveniently. These components are:

    • Image: The Image component is used to display images. It provides an easy way to load and display images with options for responsive behavior, fallbacks, and accessibility features.

        import { Image } from "@chakra-ui/react";

  function MyComponent() {
    return <Image src="/path/to/image.jpg" alt="Description of the image" />;
  }

    • Avatar: This is used to represent users in your application with profile pictures. It allows you to display a circular or square-shaped image (Avatar) with varying size options.

        import { Avatar } from "@chakra-ui/react";

  function MyComponent() {
    return <Avatar name="Eren Jaeger" src="/path/to/avatar.jpg" />;
  }

    • Video: The Video component is used to embed videos from external sources or self-hosted. It provides options for responsive sizing and controlling autoplay and other video properties.

        import { Video } from "@chakra-ui/react";

  function MyComponent() {
    return <Video src="/path/to/video.mp4" controls />;
  }

    • Icon: This is used to display vector icons from popular icon libraries like Feather Icons, Font Awesome, and more. You can choose an icon, customize its size and color, and apply additional styles.

        import { Icon } from "@chakra-ui/react";
  import { FaHome } from "react-icons/fa";

  function MyComponent() {
    return <Icon as={FaHome} boxSize={6} color="blue.500" />;
  }

  2. Navigation: These are components that help in simplifying navigation throughout your application. Some of them are:

    • Link: The Link component is used for creating clickable links in your application. It provides various styling options and accessibility features for creating accessibility and finesse.

    • Navbar: The Navbar component is used for building flexible and responsive navigation bars and Links in your component.

  3. Form: These components are designed specifically to simplify all form-related processes in your application. They ensure the process of collecting user inputs, validating forms, managing form submissions and handling error messages are well organized.

    Some of these components are:

    • Input

    • Select

    • Radio

    • Button

    • Form

    • FormErrorMessage

    • FormHelperText

    • Checkbox

Most of these components operate the same way HTML form elements do. You can read more on these components here.

  1. Typography: These components hold or style text content in your application.

    • Text: The Text component is used to hold the text and paragraphs in your application. Chakra UI range of style props is provided to alter the styling of the text.

        import { Text, Stack } from '@chakra-ui/react'

  <Stack spacing={3}>
    <Text fontSize='lg'>(lg) In love with React & Next</Text>
    <Text fontSize='md'>(md) In love with React & Next</Text>
    <Text fontSize='sm'>(sm) In love with React & Next</Text>
    <Text fontSize='xs'>(xs) In love with React & Next</Text>
  </Stack>

For the sake of brevity, these are the categories I will mention here. You can refer to the official documentation for more information.

Drawbacks of Chakra UI

Although Chakra UI is a powerful library, it is important to highlight some of the potential drawbacks you might face while using this technology. Here are some that I personally dealt with.

  1. Learning Curve: Chakra UI has a completely different set of APIs and concepts than what most developers might be used to. Personally, it took some time before I was able to grasp these concepts so keep in mind it may require some time and effort to understand.

  2. Design Constraints: After understanding Chakra UI this was the next issue I faced. Since Chakra UI components come already pre-built they did not fit perfectly into the design and branding of the application I was working on. I had to include additional styling. Of course, with time I got used to this and I developed ways to solve this particular Issue.

  3. Bundle Size: Adding Chakra UI to your application will ultimately increase the amount of space in your application. You might want to take note of this if you are building an application that has strict performance restrictions because the overall bundle size might affect this.

  4. Dependencies: If you noticed earlier when we Initialized our React app with Chakra UI we installed some dependencies one of which was Emotion which is used for styling. These dependencies may complicate your dependency tree and may cause version control issues in your application. Currently, I am not aware of ways to solve this.

Conclusion

While Chakra UI provides a powerful framework for building components it is important to consider the pros and cons of this technology and if it fits into the design and constraints of your project. This is why understanding the project you are about to build is very important.

ReactChakra-uiJavaScriptJavaScriptTechnical writing