An introduction to Chakra UI

Introduction

Chakra UI is a UI component library specifically designed for React. It provides a comprehensive set of pre-styled components ranging from basic layout components to advanced form inputs, modals, loading bars, and many more. Chakra UI has a powerful and React-forward prop-based styling system that easily allows for responsive design as well as a high degree of customizability.

Chakra UI also has a strong focus on theming and customizability, allowing for a high degree of control and consistency over an application’s look and feel. It also provides many quality of life utilities that make frontend development faster and more efficient, such as a built-in dark mode, and a comprehensive set of responsive design tools.

This guide will cover the basics of Chakra UI, including installation, setup, usage, the benefits and drawbacks of using Chakra UI, and further reading.

Installation & Setup

Installation

To install Chakra UI you can use the Node Package Manager (npm) or yarn:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Setup

Once Chakra UI has been installed to your React app, your application will need to become a child of the ChakraProvider to begin utilizing Chakra’s pre-styled components. Your App.jsx should look roughly similar to this snippet from Chakra UI’s website:

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>
  );
}

A list of components and their custom props can be found here.

Usage

Design principles

Chakra UI employs several key design principles:

Using UI components

Chakra UI provides a plethora of pre-styled components that cover a wide range of UI needs. These components are highly customizable and can be easily integrated into your React application.

Basic Usage: To use a Chakra UI component, simply import it from @chakra-ui/react and use it as you would any other React component. For example, to use a Button component:

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

function MyComponent() {
  return <Button colorScheme="blue">Click me</Button>;
}

Styling components

A component’s style can be customized by passing certain props to it. The props that are accepted rougly correspond to CSS properties, and accept any value that CSS accepts.

For example, the following creates a button with styling that corresponds to the CSS property margin-left: 10px;

<Button marginLeft={"30px"}>hello</Button>

To make development faster and reduce code clutter, many commonly used props also have abbreviated aliases that are shorter and more legible. For example, in the above example, ml is the abbreviated alias of marginLeft, so it would be equivalent to:

<Button ml={"30px"}>hello</Button>

A list of props, their aliases, as well as their corresponding CSS class can be found here.

Pseudo classes also exist in this styled prop system. Pseudo classes are differentiated with an underscore at the beginning of the prop and they accept an object of prop name and value key-value pairs. For example, the following creates a button which changes the background to red when hovered over:

<Button _hover=>hello</Button>

Other common pseudo classes would include _active, _focus, _before, etc. A full list of pseudo classes can be found here

Responsiveness

Chakra UI’s responsive design is highly customizable and easy to implement. The width style prop, for example, can accept an object of prop name and value key-value pairs, where the key is a breakpoint and the value is the prop value. By default, the breakpoints correspond to pre-defined sizes corresponding to the min-width of the screen (e.g. base: "0em", sm: "30em", md: "48em", etc.). For example, the following creates a box with a width of 100% on screens smaller than 30em (mobile) and 50% on screens larger than 30em (desktop):

<Box width=>hello</Box>

Chakra UI also has a shorthand for responsive design, where the prop value is an array of values, where the first value corresponds to the base value and the second value corresponds to the value at the first breakpoint. For example, the following creates a box with a width of 100% on screens smaller than 30em (mobile) and 50% on screens larger than 30em (desktop):

<Box width={["100%", "50%"]}>hello</Box>

Breakpoints can also be customized using the theme object, allowing for a higher degree of control over responsive design. A full list of breakpoints and their default values can be found here.

Theming

Chakra UI’s theming system is highly customizable and allows for a high degree of control over the look and feel of your application. The ChakraProvider component accepts a theme prop, which is an object that contains the theme configuration. The theme object can be customized to include custom colors, fonts, breakpoints, and more. For example, the following creates a custom theme with custom colors:

// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"

// 2. Call `extendTheme` and pass your custom values
const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      // ...
      900: "#1a202c",
    },
  },
})

// 3. Pass the new theme to `ChakraProvider`
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

// 4. Now you can use these colors in your components
function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}

This example was taken from the documentation on custom theming. This page contains more information on customizing themes and providesa comprehensive list of the theme configuration options.

Benefits and Drawbacks

Benefits

Drawbacks

Resources