How to Integrate react and chakra-UI

In this post, we are going to integrate chakra UI with React.

Create a new project

First, create a basic react project using the below command.

npx create-react-app chakraui-demo

Open the project in your code editor.

Adding chakra-UI

Now, we need to install chakra-UI. To do so run the below command.

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

or

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

Adding ThemeProvider

Use below code at root of your project

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

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

Here is the customTheme file

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

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: {
      100: "#CFD1FR",
      200: "#A7ABFE",
      300: "#8388F8",
      400: "#6268F3",
    },
  },
}

export default customTheme

Using components

To use any component, simply import it from @chakra-ui/core

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