How to setup Chakra-UI in React using cra

TL;DR

We'll setup Chakra UI in React using create-react-app and explore a basic example.

Read the full article at my blog

Introduction

Chakra UI is a modern React UI library. It provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

The last year, Chakra UI gained a lot of traction and the hype is building around the library.

Today, I will guide you on how to set up Chakra UI using the create-react-app generator.

1. Create a new project

The easiest way to generate a React project is by using the Create React App. Replace the demo-app text with your app’s name.

npx create-react-app demo-app
cd demo-app

2. Install Chakra

Then, we have to install the Chakra UI library and its dependencies.

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming

3. Add the ThemeProvider

Your first action is to wrap your application with their ThemeProvider component that includes all the appropriate styling for your components.

It's optional but you can pass as a prop a custom theme object that overrides Chakra's default theme options. It's a great way to add custom color palettes and icons.

import React from "react"
import { ThemeProvider } from "@chakra-ui/core"
import customTheme from "./customTheme"

return <ThemeProvider theme={customTheme}>{props.children}</ThemeProvider>

About your custom theme, you can easily add a custom palette. CopyPalette app can be handy for the palette generation.

Below, I show an example custom theme file for with a primary color (You'll see next how to use it).

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

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: {
      100: "#CFD1FD",
      200: "#A7ABFB",
      300: "#8388F9",
      400: "#6268F8",
      500: "#444BF7",
      600: "#262EF6",
      700: "#0B14F5",
      800: "#0911DD",
      900: "#080FC7",
    },
  },
}

export default customTheme

4. Inject global styles

Sometimes you may need to apply CSS reset styles to your application. Chakra UI exports a CSSReset component that will remove browser default styles.

The creators recommend adding the CSSReset component at the root of your application to ensure all components work correctly.

import { CSSReset, ThemeProvider } from "@chakra-ui/core"
import customTheme from "./customTheme"

return (
  <ThemeProvider theme={customTheme}>
    <CSSReset />
    {children}
  </ThemeProvider>
)

Ready to add Chakra components

At this point, the basic setup is completed. You should be able to add successfully the Chakra UI components.

For demonstration, we'll add two typography components <Text> and <Heading> and a <Button> wrapped by a Stack component. At the same time, we'll utilize the custom primary color palette we added earlier.

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. The spacing prop is the one that defines the spacing between components. It accepts all the valid Styled System props too.

About the custom colors, you can easily apply them as a string by specifying its name e.g "primary" and the desired tint/shade e.g. "primary.500".

One tricky point here is that the default style props need the color explicitly defined e.g. "primary.500".

Whereas the button component needs only the name of the color e.g. "primary" and handles internally the color shades/tint for its states (wow huh?!).

import { Button, Heading, Stack, Text } from "@chakra-ui/core"

return (
  <Stack spacing={4} bg="white" p={8} borderRadius="lg">
    <Heading as="h1" size="md" color="primary.900">
      Chakra UI is rad!
    </Heading>
    <Text as="p" fontSize="md" color="primary.500">
      Here are your first Chakra components:
    </Text>
    <Button variantColor="primary" isFullWidth>
      Click me, please!
    </Button>
  </Stack>
)

Up to this point, you're ready to apply your own styles and explore their rich component gallery!

Have fun and share with me your creations by tagging me @d__raptis on twitter 💪