How to setup Chakra-UI in React using cra
Tags: react, javascript
Published: 2020-07-24 10:33:16

---
title: How to setup Chakra-UI in React using cra
published: true
description: Chakra UI is a modern React UI library. It provides a set of accessible, reusable, and composable React components that make it a super fit with React for creating apps.
tags: react, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gsim74rq0z2b66rfqf9r.jpg
canonical_url: https://www.jimraptis.com/blog/chakra-ui-react-setup/
---
**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](https://www.jimraptis.com/chakra-ui-react-setup/)**

![A simple card element with a heading, a text and button](https://dev-to-uploads.s3.amazonaws.com/i/g66z0b3kbg3o7gtdp8tx.jpg)

## 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.

```bash
npx create-react-app demo-app
cd demo-app
```

## 2. Install Chakra

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

```bash
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.

```jsx
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](https://www.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).

```jsx
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.

```jsx
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.

![A simple card element with a heading, a text and button](https://dev-to-uploads.s3.amazonaws.com/i/g66z0b3kbg3o7gtdp8tx.jpg)

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?!).

```jsx
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](https://twitter.com/d__raptis) on twitter 💪