Why and when to use Chakra versus Bumbag

In this ever-changing era of evolving UI component kits for rapid frontend development, developers are presented with many options to choose from when developing our frontend application, no matter the size or scope of the project.

In this article, we’ll compare and analyze two UI component kits: Chakra UI and Bumbag UI. We’ll look at their differences, similarities, and features so you can decide which one to use on your next project. Let’s get started.

Prerequisites

For this article, you’ll need a basic knowledge of JavaScript and of frontend development.

What is Chakra UI?

According to developer Segun Adebayo, “Chakra UI is a simple, modular, and accessible component library that gives you all the building blocks you need to build your React applications.”

Chakra UI started as a React-based components kit but has expanded to many other frontend frameworks like Vue, Nuxt, React-Native, and Angular.

Features of Chakra UI

Chakra UI offers many great features, such as:

1. Ease of use: Styling layout components in Chakra UI is easy, thanks to its customizable Box and Stack components, which you can pass along props
2. Flexibility: Chakra UI components use React UI Primitive for flexibility and easy adaptability
3. Composable: You can easily create any component from an existing Chakra UI component
4. Themes: You can quickly reference values from your theme throughout your entire application on any component
5. Accessibility: Chakra UI has out-of-the-box web accessibility support, meaning it strictly follows WAI-ARIA standards. Every component of Chakra UI is properly attributed, and it has proper keyboard interactions, too

Getting started with Chakra UI

Let’s learn how to start using Chakra UI for React. If you’re using Vue, you can learn how to set it up here.

Installation

First, install Chakra UI and its peer dependencies.

npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Always wrap your app with ThemeProvider from chakra-ul/core. I also recommend that you always add CSSReset component to reset browser styling.

import { ThemeProvider as ChakraProvider, CSSReset as CSSDefaults } from "@chakra-ui/core"

function App({ children }) {
  return (
    <ChakraProvider>
      <CSSDefaults />
      {children}
    </ChakraProvider>
  )
}

Now you can start using components like so:

import { Button } from "@chakra-ui/core"

function Example() {
  return <Button>Welcome to ⚡️Chakra!</Button>
}

Building a contact form with Chakra UI

We are going to use Chakra UI to create a contact form to allow users to contact us. Chakra UI is a great library for creating HTML forms, as it provides rich tools to easily develop forms.

We will start by importing the necessary components needed to create this form.

import React from 'react';
import { ThemeProvider, CSSReset, theme, Button, Input, Textarea, FormLabel, FormControl, Heading, IconButton, Flex, Box, } from '@chakra-ui/core';

After importing the components, we will initialize Chakra UI with the necessary color reset and other housing.

Setting up Chakra UI with React

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>
        <CSSReset />
        <ContactObj />
      </ColorModeProvider>
    </ThemeProvider>
  )
}

Next, we will create the ContactForm object that holds the form.

Creating the ContactObj component

const ContactObj = () => {
  return (
    <Flex minHeight="100vh" width="full" align="center" justifyContent="center">
      <Box
        borderWidth={1}
        px={4}
        width="full"
        maxWidth="1000px"
        borderRadius={4}
        textAlign="center"
        boxShadow="lg"
      >
        <ThemeSelector />
        <Box p={4}>
          <ContactHeader />
          <ContactForm />
        </Box>
      </Box>
    </Flex>
  )
}

The ContactObj makes use of Chakra UI’s Box component and includes the ContactHeader and ContactForm components to create the contact form.

Creating the ContactHeader component

const ContactHeader = () => {
  return (
    <Box textAlign="center">
      <Heading>Contact Us</Heading>
    </Box>
  )
}

The ContactHeader simply contains the header code for the contact form.

Creating the ContactForm component

const ContactForm = () => {
  return (
    <Box my={8} textAlign="left">
      <form>
        <FormControl>
          <FormLabel>Name</FormLabel>
          <Input type="text" placeholder="Enter your name" />
        </FormControl>
        <FormControl>
          <FormLabel>Email</FormLabel>
          <Input type="email" placeholder="Enter your email" />
        </FormControl>
        <FormControl>
          <FormLabel>Message</FormLabel>
          <Textarea type="textarea" placeholder="Enter your message" />
        </FormControl>
        <Button variantColor="blue" type="submit" mt={4}>
          Submit
        </Button>
      </form>
    </Box>
  )
}

The ContactForm contains the HTML form fields style with Chakra UI.

Previewing the contact form

If you put everything up successfully, you will be presented with this contact page:

Pros of using Chakra

• Easy to use: Chakra keeps great developer experience in mind and is easy to get started with
• Style Props: Because of the nature of Chakra-styled system, it’s easy and possible to override and extend styles using props
• Composition: Chakra breaks down components into composable and functional small units, making it easy to debug
• Dark mode: Chakra supports dark mode theme out of the box, so that no code or configuration is required
• Chakra supports Vue and React frameworks

Cons of using Chakra

• Chakra has no support for date pickers, which is a notable limitation of Chakra UI
• Some components of Chakra UI are impossible to style, so you’re stuck with the default style for that particular component
• Chakra provides default themes thereby making it difficult to theme some components
• You need additional wrapper for the configuration of some components. For example, when working with hover/active, you can also style such using psuedobox

Use case

Chakra is undoubtedly popular and has gained a lot of traction. When building projects that need the ability to switch themes and colors, then Chakra is the best option to use. It’s also constantly growing and improving the codebase, so more interesting components and flexibility will be added in the future.

Now let’s take a look at Bumbag.

What is Bumbag UI?

“Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications,” says developer Jake Moxey.

Coding with Bumbag UI simply means that you’re coding with an intuitive API that is understood by designers.

Bumbag, formerly known as Fannypack, started in 2018 and has recently gained popularity because of the unique features it comes with in creating React component kits.

Features of Bumbag UI

Bumbag UI has some interesting features, such as:

1. Accessibility by default: The accessibility in BumbagUI is powered by Reakit, and all components come with accessible HTML attributes and keyboard interactions out of the box, as well as follow the WAI-ARIA standards
2. Themes: Bumbag UI enables you to customize any component by altering the theme at a global or component level
3. Flexibility: Building your own component, contact form, or even call to actions with Bumbag is simple. You can learn more about composition in Bumbag here

Getting started with Bumbag UI

First, install Bumbag:

npm install bumbag

Once installed, wrap your application with BumbagProvider:

import { Provider as BumbagProvider } from 'bumbag';
const App = () => (
  <BumbagProvider>
    Hello world!
  </BumbagProvider>
);

Now, you can start using the Bumbag components:

import { Button, Provider as BumbagRoot } from 'bumbag';
const App = () => (
  <BumbagRoot>
    <Button>
      Welcome to Bumbag!
    </Button>
  </BumbagRoot>
);

Building a contact form with Bumbag

Now, we’ll also build a contact form using Bumbag. First, import the necessary components:

import React from 'react';
import { Provider as BumbagProvider, defaultTheme, Button, Input, Textarea, Label, FieldWrapper, FieldStack, Flex, Box, } from 'bumbag';

To set up Bumbag, use the following:

 const App = () => (
     <BumbagProvider isStandalone theme={defaultTheme()}>
        // ... your app
      </BumbagProvider>
  );

Now, set up contactObj:

const ContactObj = () => {
  return (
    <Flex minHeight="100vh" width="full" alignX="center" alignY="center">
      <Box
        borderWidth={1}
        px={4}
        width="full"
        maxWidth="1000px"
        borderRadius={4}
        textAlign="center"
        boxShadow="lg"
      >
        <ThemeSelector />
        <Box p={4}>
          <ContactHeader />
          <ContactForm />
        </Box>
      </Box>
    </Flex>
  )
}

Next, you’ll you set up your header:

const ContactHeader = () => {
  return (
    <Box textAlign="center">
      <Heading>Contact Us</Heading>
    </Box>
  )
}


const ContactForm = () => {
  return (
    <Box my={8} textAlign="left">
      <FieldStack>
        <FieldWrapper label="Name" placeholder="Enter your name">
          <Input />
        </FieldWrapper>
        <FieldWrapper type="email" label="Email" placeholder="Enter your email">
          <Input/>
        </FieldWrapper>
        <FieldWrapper label="Message">
          <Textarea placeholder="Enter your message"/>
        </FieldWrapper>
        <Button palette="primary">
          Submit
        </Button>
      </FieldStack>
    </Box>
  )
}

Now you should now have a contact form.

Pros of using Bumbag UI

• Like Chakra UI, Bumbag also has built-in dark mode
• Bumbag has Emotion built in, which is essentially API styled-components
• Bumbag has been around for longer than Chakra, but with a different name, previously known as Fannypack
• Bumbag has 70+ accessible components
• It supports global- and component-level styling and theming

Cons of using Bumbag

• Bumbag isn’t as popular as Chakra UI, so finding solution to errors can be more difficult
• Setting up dark mode requires more code than is needed in Chakra
• Bumbag does not support Vue yet, though it’s currently under development

Use case

If you’re looking at creating a quick minimum viable product (MVP) or large-scale application with support to many and multiple components, including date pickers, then Bumbag UI is a good choice.

Conclusion

Choosing a tech stack for a project depends on many factors, including team preference and point of view on the project at hand.

In this article, we learned about Chakra UI and Bumbag UI in detail, how their features are different, and how to get started with both of them.

Chakra and Bumbag are similar and can be used to accomplish the same tasks. So which one should you choose? Consider the following when it comes to choosing your tech stack:

1. Popularity: Popularity is not always the best reason to choose a library, but the more popular the product, the more resources there may be at your disposal should an issue or bug arise in your project.
2. Project Type: Of course, you should always consider the project — the type of project, the size, etc. — you are building with a library when you decide on your next tech stat. Make sure to choose a library that fits exactly your project type.
3. Maintainability: You should choose a library that is actively maintained to avoid introducing bugs or deprecated codes to your project.

From the above general perspectives, you should be able to choose a good components kit for your next project. Happy coding!