Chakra UI adoption guide: Overview, examples, and alternatives

Written by Isaac Okoro
✏️

Chakra UI is a popular React component library designed to speed up and simplify UI development. It provides a set of customizable and composable components that developers can easily integrate into their React applications.

In today’s frontend landscape, Chakra UI stands out due to its excellent DX and support for building accessible frontend components. You can also use Chakra UI to improve the overall efficiency of your development process.

This adoption guide will provide some background information about Chakra UI. We’ll discuss its pros, cons, key features, and use cases to help you understand what makes this library a great choice for modern applications. Let’s get started.

---

What is Chakra UI?

Chakra UI was developed by Segun Adebayo to address the need for a simple component library for React applications. It has gained popularity due to its flexibility, ease of use, and excellent collection of pre-designed components that follow design principles and best practices.

Chakra UI works by offering React components that can be easily incorporated into any application. These components cover a wide range of UI elements, such as buttons, forms, modals, and more.

One notable feature of Chakra UI is its emphasis on style props, allowing for component styling through props. This simplifies the styling process and makes it more intuitive.

Further reading:

• Strongly typed polymorphic components with React and TypeScript — Chakra UI’s [as] prop
• UI best practices for loading, error, and empty states in React

---

Why choose Chakra UI?

Chakra UI provides an amazing user experience and a low learning curve, making it particularly beginner-friendly. There are many reasons why you should use Chakra UI, including:

• Ease of use: Chakra UI makes it very easy to quickly understand and use its components by providing an intuitive and beginner-friendly API. It also exposes utility functions that help simplify repetitive tasks like the creation of headers, modals, and dialogs
• Bundle size: Chakra UI supports tree shaking, which selectively eliminates dead code during build processes and helps significantly reduce the final bundle size. It also uses a modular structure, meaning you can isolate essential parts of the library and selectively import only the components you need
• Community & ecosystem: Chakra UI has a large, active, and supportive community of developers who readily and regularly contribute to discussions and share knowledge. It’s an open source project with over 35k stars on its GitHub repository, and the core team encourages collaboration and contributions from the community
• Learning curve: Chakra UI is rich in learning resources, including excellent documentation, video content, and blog posts. Its intuitive API design and utility-first styling approach lower the learning curve and make it easier for developers to dive into the library
• Integrations: Chakra UI integrates seamlessly with React and frameworks built on the React framework, like Next.js, Gatsby, Remix, Redwood, and more. It also supports external integrations with Storybook, Formik, Framer Motion, and other tools
• Extensions/customizations: Chakra UI is highly flexible when it comes to extensions and customizations. Its utility-first styling and theming approach makes it easy for developers to apply custom styles and modifications by overriding default styles, creating custom components, or extending existing ones

Despite all these great and compelling reasons to choose Chakra UI, it’s only fair to mention some of its drawbacks. So, now that we’ve discussed what makes Chakra UI great, let's talk about some of Chakra UI’s cons:

• Framework limitations: We discussed how Chakra integrates well with React and frameworks built on React. However, because Chakra UI was primarily designed for React, it’s not as easy or intuitive to use Chakra UI with other JavaScript frameworks like Vue or Angular. There are, however, workarounds around these limitations that will allow you to leverage Chakra UI’s benefits in non-React projects
• Runtime tradeoff: One of Chakra UI’s biggest flaws is its runtime footprint. Chakra UI uses Emotion — a CSS-in-JS library — and Styled System for styling, which contributes to a certain level of computational overhead during the runtime. As a result, your app will consume a bit more memory and processing power. However, the effects of this tradeoff are only really noticeable in large-scale and enterprise-level applications

So far, we’ve explored Chakra UI’s background, pros, and cons. Let’s discuss some of its standout features next to give you a clearer picture of its capabilities.

---

Key Chakra UI features to know

Chakra UI offers a comprehensive set of customizable and composable components. Let’s take a quick look at some of the key aspects of Chakra UI that you should know before getting started.

Further reading:

• Advanced techniques in Chakra UI

---

Components

Chakra UI components are sets of pre-built shapes, widgets, or objects. They are fully customizable and easy to import and use in our application. The Chakra documentation organizes components into different categories:

• Layout components, such as Stack
• Form components, such as Input
• Data display components, such as Card
• Feedback components, such as Toast
• Typography components, such as Heading
• Overlay components, such as Drawer
• Disclosure components, such as Accordion
• Navigation components, such as Breadcrumb
• Media and icon components, such as Avatar
• Other components, such as Transitions

Let’s look at how Chakra UI’s Stack component works. We can use this layout component to arrange its children’s elements vertically or horizontally and apply spacing between them.

Chakra UI provides developers with three types of Stack components:

• Stack: For laying out stacked items in a specified direction (horizontally or vertically)
• HStack: For laying out stacked items horizontally
• VStack: For laying out stacked items vertically

Here’s an example of how to display items horizontally and vertically with the help of Chakra UI’s Stack components:

import { Stack, Box, Image, VStack, HStack, Heading } from "@chakra-ui/react";

export const App = () => {
  return (
    <Box p={12} textAlign="center">
      <Heading as="h3">Stack with items displayed Horizontally</Heading>
      <Box h={3} />
      <Stack
        direction="row"
        spacing="30px"
        w="100%"
        align="center"
        justify="center"
      >
        <Image h="100" src="https://rb.gy/25527l" />
        <Image h="100" src="https://rb.gy/pdow7u" />
        <Image h="100" src="https://rb.gy/ci9dvg" />
      </Stack>
      <Box h={20} />

      <Heading as="h3">Vertical Stack</Heading>
      <Box h={3} />
      <VStack spacing="10px" textAlign="center">
        <Image h="100" src="https://rb.gy/25527l" />
        <Image h="100" src="https://rb.gy/pdow7u" />
        <Image h="100" src="https://rb.gy/ci9dvg" />
      </VStack>
      <Box h={6} />
    </Box>
  );
};

The Stack component displays items in a vertical direction if the direction prop isn't specified. Here’s the outcome of our code:

Light and dark color modes

One of Chakra UI’s more exciting features is its out-of-the-box support for theming. Theming enables users to change the color state of the application between light and dark mode, like so:

import { Button, useColorMode, Box } from '@chakra-ui/react'

export const App = () => {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <Box p="16">
      <p>The current Theme is: {colorMode} mode.</p>
      <Box h="7" />
      <Button onClick={toggleColorMode}>Change Theme</Button>
    </Box>
  )
}

The code snippet above demonstrates how Chakra UI handles theme changes in an application. Firstly, we imported the useColorMode hook from the @chakra-ui/react library. This hook gives us access to the colorMode state and the toggleColorMode function.

The colorMode state provides us with the current theme data — light or dark — while the toggleColorMode is a function used to toggle between these theme states. Here’s the outcome: This feature is seamlessly integrated into Chakra UI’s theming system, making it convenient for developers to implement and for users to switch between their preferred color modes.

Further reading:

• Which UI libraries support dark mode?

---

CSS properties

Another of Chakra UI’s key features is a set of utility-first CSS properties within the library, making styling and customizing components easy. Utility classes eliminate the need to create separate stylesheets to customize components by directly mapping to the CSS properties.

One way to leverage this feature is by using arrays or object notations when creating different breakpoints for responsive styling. Another use case is when specifying pseudo-classes — such as hover, focus, and active — on Chakra UI components without needing to write additional CSS.

Let’s see an example of Chakra UI’s utility-first styling approach:

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

export const App = () => {
  return (
    <Box p="16">
      {/* Customizing component */}
      <Box p={4} bg="purple.700" color="white">
        <Text fontSize="xl" fontWeight="600">
          This is a styled component using Chakra UI utility classes.
        </Text>
      </Box>

      <Box h="10" />

      {/* Responsive font size and padding */}
      <Box p={[20, 2, 40]} bg="green.900" fontSize={['sm', 'md', 'xl']}>
        This component has responsive padding and font sizes.
      </Box>

      <Box h="10" />

      {/* Pseudo-classes */}
      <Button
        bg="blue.500"
        _hover={{ bg: 'red.500' }}
        _active={{ bg: 'yellow.600' }}
      >
        Click me
      </Button>
    </Box>
  )
}

In the code above, we created:

• Responsive padding: p={[20, 2, 40]}
• Responsive font sizes: fontSize={['sm', 'md', 'xl']}

We also wrote pseudo-classes in Chakra UI by using object annotations, as seen above in the _hover and _active states for the button. The outcome should look like so:

Further reading:

• Building responsive components in Chakra UI

---

Custom values

Using custom values in Chakra UI allows us to easily incorporate our preferred values when styling and theming Chakra UI components.

For example, we can extend or replace the default color palette with our preferred custom color palette. This is also applicable to font, typography, sizes, and spacing. Let’s see this in action:

import { Button, extendTheme, Box, ChakraProvider, Text } from '@chakra-ui/react'

const customTheme = extendTheme({
  colors: {
    newColor: {
      500: '#00A67D',
    },
    newFontColor: {
      200: '#011727',
    },
  },
  fonts: {
    heading: 'Helvetica Neue, sans-serif',
    body: 'CustomBodyFont, sans-serif',
  },
  fontSizes: {
    l: '34px',
  },
  sizes: {
    container: '520px',
  },
  space: {
    customPadding: '27px',
  },
})

export const App = () => {
  return (
    <ChakraProvider theme={customTheme}>
      <Box
        p="customPadding"
        maxW="container"
        bg="newColor.500"
        color="newFontColor.200"
      >
        This box has a custom padding, size, font color, and background color.
      </Box>
      <Text fontSize="l" fontFamily="heading">
        This text has a custom font family and font size.
      </Text>
    </ChakraProvider>
  )
}

In the code block snippet above, we extended the extendTheme object and made some modifications to it. We added our custom color, font, size, and space, which we later used in our components. You can see the result below:

---

Practical use cases for Chakra UI

Chakra UI is a broad React component library that can be used in various practical and business cases. Below are some example scenarios where we can utilize Chakra UI:

• MVP development and startups: When speed is crucial and resources are limited, Chakra UI is an excellent choice. This library’s utility-first styling approach and pre-styled components allow teams to focus mainly on core functionality rather than styling and design, thus boosting the efficiency of development
• Ecommerce and educational platforms: With Chakra UI’s component library, we can readily design and customize product listings, carts, and checkout processes for ecommerce platforms. Likewise, it’s easy to create intuitive, user-friendly designs for educational platforms
• Design systems: Chakra UI is ideal for creating a comprehensive collection of reusable components, patterns, styles, guidelines, and standards. It provides a unified design language for managing designs effectively and ensuring a consistent and coherent brand identity across various applications

You can see some more example use cases in the Chakra UI Showcase.

Further reading:

• How to create forms with Chakra UI in React apps
• Building a photo gallery app from scratch with Chakra UI
• Build a Kanban board with dnd kit and React
• Hacker News client with Chakra UI and Next.js

---

Chakra UI vs. other UI libraries

While Chakra UI is a great UI library, it isn’t the only one out there. When choosing a UI library for your project, it’s important to consider each option’s design principles, features, and more. Let’s see how Chakra UI matches up to three other popular UI libraries:

• Material UI offers similar features to Chakra UI, such as pre-styled components and customization options. However, Chakra UI shines by emphasizing the creation of scalable, composable, and flexible code, thus prioritizing a layout-focused and developer-friendly approach. Chakra UI also increases the flexibility of manipulating CSS classes and supports responsive styling
• Tailwind CSS has a distinct styling and component management approach that sets it apart from Chakra UI — to name one example, it offers atomic classes, allowing you to apply single-responsibility, highly reusable utility classes directly within your HTML. However, it doesn’t handle specific concerns like accessibility and overrides. Tailwind CSS also has a steeper learning curve for beginners. Meanwhile, Chakra UI provides an intuitive prop-based model, out-of-the-box support for accessibility, a gentle learning curve, and dark mode variations
• Bootstrap offers an extensive set of pre-defined styles, classes, and pre-built components. It relies on modifying default variables and CSS classes in theme customization. However, Chakra UI surpasses this by allowing complete customization through a global style object. Despite being more minimalistic, Chakra UI shines in customizability and accessibility

Here’s a comparison table to further help you evaluate your options:

Feature	Chakra UI	Material UI	Bootstrap	Tailwind CSS
Supported frameworks and libraries	React	React, Vue, Angular, Svelte, Preact, Ember	React, Vue, Angular, Svelte	React, Vue, Angular, Svelte, Preact, Ember, Solid.js, Next.js
Community & resources	Active community, good documentation and tutorials	Large community, extensive documentation and tutorials	Massive community, extensive documentation and tutorials	Growing community, growing documentation, tutorials
Bundle size	~48KB minified	~150KB minified (core), +44KB for Material Icons	~44KB minified	~7KB minified
Pre-styled components	Yes	Yes	Yes	No
Customization options	Yes	Yes	Yes	Yes
Focus	Scalable, pre-built components and accessibility	Layout-focused	Pre-built components	Atomic classes
Learning curve	Gentle	Gentle	Steeper	Steeper
Dark mode	Yes	Yes	Yes	Yes

Further reading:

• The top React UI libraries and kits in 2023
• Choosing when to build a custom React component library

---

Conclusion

Chakra UI has emerged as a highly relevant design library in the frontend ecosystem. Its support for modern design principles, useful features, ease of use, and many other features make it an excellent choice for application development.

In this guide, we took a thorough look at Chakra UI, a React component library that speeds up UI development. We looked at how Chakra UI works, its pros and cons, and some examples of practical use cases. We also compared Chakra UI to other design libraries and their features.

---

Get set up with LogRocket's modern error tracking in minutes:

1. Visit https://logrocket.com/signup/ to get an app ID.
2. Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Script Tag:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

• Redux middleware
• ngrx middleware
• Vuex plugin

Get started now