Chakra UI in React

You are currently viewing Chakra UI in React

Chakra UI in React

Chakra UI is a simple, modular, and accessible component library that provides a set of customizable and ready-to-use components for building React applications. It is designed to be highly composable and easy to use, allowing you to quickly create beautiful and responsive user interfaces. In this tutorial, we’ll guide you through the process of setting up Chakra UI in a React project and creating a simple web page.

Table of Contents

  1. Installation
  2. Basic Usage
  3. Creating a Simple Web Page
  4. Theming and Customization
  5. Conclusion

1. Installation

You can install Chakra UI and its peer dependencies using npm or yarn.

Using npm

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Using yarn

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. Basic Usage

After installing Chakra UI, you can start using its components in your React application.

Set up ChakraProvider

In your src/index.js or src/App.js, wrap your app with the ChakraProvider:

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

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

Importing Components

You can import individual components or the entire library:

import { Box, Heading, Text, Button } from "@chakra-ui/react";

Using Components

Use the imported components in your React components:

function App() {
  return (
    <Box p={8}>
      <Heading as="h1" size="2xl" mb={4}>
        Welcome to Chakra UI
      </Heading>
      <Text fontSize="xl" mb={4}>
        A simple and accessible component library for React applications.
      </Text>
      <Button colorScheme="blue">Get Started</Button>
    </Box>
  );
}

export default App;

3. Creating a Simple Web Page

Let’s create a basic web page using Chakra UI components.

3.1 Create App.js

Create a new file App.js in your src directory with the following content:

import { Box, Heading, Text, Button } from "@chakra-ui/react";

function App() {
  return (
    <Box p={8}>
      <Heading as="h1" size="2xl" mb={4}>
        Welcome to Chakra UI
      </Heading>
      <Text fontSize="xl" mb={4}>
        A simple and accessible component library for React applications.
      </Text>
      <Button colorScheme="blue">Get Started</Button>
    </Box>
  );
}

export default App;

3.2 Update index.js

Update src/index.js to render the App component:

import React from 'react';
import ReactDOM from 'react-dom';
import { ChakraProvider } from '@chakra-ui/react';
import App from './App';

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

4. Theming and Customization

Chakra UI provides a way to customize the theme and styles of your components.

Customizing Theme

Create a theme.js file in your src directory:

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    brand: {
      50: '#f3faff',
      100: '#d9f2ff',
      200: '#b4e0ff',
      300: '#8ecfff',
      400: '#6ec1ff',
      500: '#4eb3ff',
      600: '#3ea6f3',
      700: '#3096d6',
      800: '#2478a3',
      900: '#185c70',
    },
  },
  fonts: {
    heading: 'Roboto',
    body: 'Roboto',
  },
});

export default theme;

Then update src/index.js to use the custom theme:

import React from 'react';
import ReactDOM from 'react-dom';
import { ChakraProvider } from '@chakra-ui/react';
import App from './App';
import theme from './theme';

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

Now you can use the brand color and Roboto font in your components:

function App() {
  return (
    <Box p={8}>
      <Heading as="h1" size="2xl" mb={4} color="brand.500">
        Welcome to Chakra UI
      </Heading>
      <Text fontSize="xl" mb={4}>
        A simple and accessible component library for React applications.
      </Text>
      <Button colorScheme="brand">Get Started</Button>
    </Box>
  );
}

5. Conclusion

Congratulations! You’ve set up Chakra UI in your React project and created a simple web page with Chakra UI components. Chakra UI provides a wide range of customizable and ready-to-use components, making it easy to build beautiful and accessible user interfaces. In this tutorial, we covered the installation, basic usage, creating a web page, theming, and customization with Chakra UI. Explore further by diving into Chakra UI’s

documentation to discover more components and styling options for your projects.

Additional Resources:

Leave a Reply