Chakra UI Color and background color

Chakra UI, working smoothly with React, makes it easy to make your app look good. It’s Color and background color helps you choose colors and backgrounds for your app in a way that’s simple and makes sense. Chakra UI gives you a set of colors and backgrounds that are known to look good together. You can easily use these colors to make your text, buttons, or other elements in your app visually appealing.

Prerequisites

• NPM & Node
• React
• CSS
• ReactJS Chakra UI

Approach:

Using color and background color properties in the components to give the components predefined color and background color.

Steps To Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app newapp

Step 2: After creating your project folder(i.e. newapp), move to it by using the following command:

cd newapp

Step 3: After creating the React application, Install the Chakra UI package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies in the package.json file:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: In this example, we are using color to give “green.500” color to Text component of Chakra UI and bgColor to give “gray.200” color background color to Box component.

Javascript

import "./App.css";
import React from "react";
import {
    ChakraProvider,
    Text, Box
}
    from "@chakra-ui/react";

function App() {
    return (
        <ChakraProvider>
            <Text
                // Apply Chakra UI color
                color="green.500"
                fontSize="2rem"
                textAlign="center"
                fontWeight="600"
                my="1rem"
            >
                GeeksForGeeks
            </Text>
            <Box
                margin="0 auto"
                width="120px"
                // Apply Chakra UI background color
                bgColor="gray.200"
                p="4"
                textAlign="center"
            >
                Chakra UI
            </Box>
        </ChakraProvider>
    );
}

export default App;

Start your application using the following command.

npm start

Output: