How to Start with Chakra UI in React?

Chakra UI is a popular React component library that provides a set of customizable and accessible UI components for building modern web applications. In this article, we will guide you through the steps to get started with Chakra UI in React.

Introduction

Chakra UI is a collection of modular and accessible React components that are designed to work seamlessly with your React applications. With Chakra UI, you can quickly create beautiful and responsive user interfaces without spending too much time on styling and accessibility.

Prerequisites

Before you start using Chakra UI in your React project, you should have the following installed:

Node.js and npm (Node Package Manager)
A working React application

Installing Chakra UI

You can install Chakra UI in your React project using npm. Open your project directory in a terminal and run the following command:

npm install @chakra-ui/react

This will install the latest version of Chakra UI in your project along with its dependencies.

Setting up Chakra UI Provider

To use Chakra UI components in your React application, you need to wrap your app with the ChakraProvider component. The ChakraProvider component provides the required theme and style context to all the Chakra UI components in your application.

Add the following import statement to your React component file:

import { ChakraProvider } from "@chakra-ui/react"

Then, wrap your top-level component with the ChakraProvider component:

function App() {
  return (
    <ChakraProvider>
      {/* Your app code goes here */}
    </ChakraProvider>
  )
}

Using Chakra UI Components

Chakra UI provides a wide range of pre-built and customizable components that you can use in your React application. To use a Chakra UI component, simply import it from the @chakra-ui/react package and use it like 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>
  )
}

Customizing Chakra UI Styles

Chakra UI components come with built-in styles and themes that you can customize to match your application’s look and feel. You can customize the style of a Chakra UI component by passing custom CSS properties as props to the component.

For example, to change the color of a Button component:

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

function MyComponent() {
  return (
    <Button colorScheme="blue" bg="red.500">Click me!</Button>
  )
}

In this example, we passed the bg prop with a value of red.500 to set the background color of the button to red.

Creating Custom Chakra UI Components

Chakra UI makes it easy to create your own custom components that are based on the existing Chakra UI components. You can use the extendTheme function to add your own custom components and styles to the Chakra UI theme.

For example, let’s say you want to create a custom Alert component that has a custom icon and text color:

import { extendTheme } from "@chakra-ui/react"

const customTheme = extendTheme({
  components: {
    Alert: {
      baseStyle: {
        icon: {
          color: "green.500"
        },
        text: {
          color: "blue.500"
        }
      }
    }
  }
})

In this example, we added a custom style to the Alert component that sets the color of the icon to green and the color of the text to blue.

Building a Sample Application with Chakra UI

To demonstrate how to use Chakra UI in a real-world application, let’s build a simple todo list application using Chakra UI components.

First, we need to create a new React application and install Chakra UI:

npx create-react-app chakra-todo
cd chakra-todo
npm install @chakra-ui/react

Next, let’s create a Todo component that renders a list of todo items:

import { VStack } from "@chakra-ui/react"

function Todo() {
  const todos = [
    { id: 1, text: "Buy milk" },
    { id: 2, text: "Walk the dog" },
    { id: 3, text: "Do laundry" }
  ]

  return (
    <VStack spacing={4}>
      {todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </VStack>
  )
}

export default Todo

In this example, we used the VStack component from Chakra UI to render a vertical stack of todo items.

Next, let’s add a form to our Todo component that allows users to add new todo items:

import { VStack, Input, Button } from "@chakra-ui/react"
import { useState } from "react"

function Todo() {
  const [text, setText] = useState("")
  const [todos, setTodos] = useState([
    { id: 1, text: "Buy milk" },
    { id: 2, text: "Walk the dog" },
    { id: 3, text: "Do laundry" }
  ])

  const handleAddTodo = () => {
    setTodos([...todos, { id: Date.now(), text }])
    setText("")
  }

  return (
    <VStack spacing={4}>
      <Input value={text} onChange={e => setText(e.target.value)} />
      <Button colorScheme="blue" onClick={handleAddTodo}>Add Todo</Button>
      {todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </VStack>
  )
}

export default Todo

In this example, we added an Input component and a Button component from Chakra UI to allow users to add new todo items. We used the useState hook to manage the state of the todo items.

Finally, let’s render the Todo component in our App component:

import Todo from "./Todo"

function App() {
  return (
    <div className="App">
      <Todo />
    </div>
  )
}

export default App

Styling Chakra UI Components

Chakra UI provides a wide range of pre-defined styles for its components, but you can also customize these styles using the theme object.

For example, let’s say you want to change the color of all Button components to red:

import { extendTheme } from "@chakra-ui/react"

const customTheme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        color: "white",
        bg: "red.500",
        _hover: { bg: "red.600" }
      }
    }
  }
})

In this example, we added a custom style to the Button component that sets the text color to white, the background color to red, and the hover background color to a darker shade of red.

You can also create your own custom styles and use them in your Chakra UI components:

import { extendTheme } from "@chakra-ui/react"

const customTheme = extendTheme({
  styles: {
    global: {
      body: {
        bg: "gray.100"
      }
    }
  }
})

In this example, we added a custom style to the global object that sets the background color of the body element to a light gray color.

Conclusion

Chakra UI is a powerful and flexible UI library for React applications. Its wide range of pre-built components, customizable styles, and ease of use make it a popular choice for building modern web applications.

Thank You