ReactJS Chakra-UI Card Component

Chakra UI, developed by Segun Adebayo, is a robust React component library with over 50 components, emphasizing accessibility, simplicity, and modularity. With concise documentation and 19.4k GitHub stars, Chakra UI, built on emoticon and styled-system technologies, accelerates front-end development, exemplified in creating a card component.

Prerequisites:

• React JS
• React Hooks
• React Framer Motion

Approach to create Chakra-UI card Component:

Since Chakra UI doesn’t have an existing card component, we will be using their flexible and abstract components to create the complete card. 

In the App.js file, import the following comments:

• Box: It is the most abstract component, it renders a div element by default. Can easily create responsive styles and pass styles via props.
• Image: The image component is used for displaying images as well as for styling and adding responsive styles,
• Stack: It is a layout component used to stack elements together and apply a space between them.
• Flex and Spacer: Used to create a responsive layout where the child elements occupy 100% of the width keeping the equal spacing between them.
• Text: It is used to render text and paragraphs within an interface.

Steps to Create React Application And Installing Module:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install Chakra UI modules using the following command:

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

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "framer-motion": "^4.1.17",
    "web-vitals": "^2.1.4",
}

Example: Below is the implementation of the above approach: For Chakra UI to work, you need to set up the ChakraProvider at the root of your application.

Javascript

//Index.js

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

ReactDOM.render(
    <React.StrictMode>
        <ChakraProvider>
            <ColorModeScript
                initialColorMode="light">
            </ColorModeScript>
            <App />
        </ChakraProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Javascript

//App.js

import React from "react";
import {
    Box, Image, Badge, Text, Stack,
    useColorMode, Button, Flex, Spacer
}
    from "@chakra-ui/react";

function App() {

    // Hook to toggle dark mode
    const
        {
            colorMode,
            toggleColorMode
        } = useColorMode();

    return (
        <div className="app">
            <Button onClick={toggleColorMode} mt={5}>
                Toggle {colorMode === "light" ? "Dark" : "Light"}
            </Button>
            <Box w="300px" rounded="20px"
                overflow="hidden" bg={
                    colorMode ===
                        "dark" ?
                        "gray.700" :
                        "gray.200"}
                mt={10}>
                <Image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210727094649/img1.jpg"
                    alt="Card Image" boxSize="300px">
                </Image>
                <Box p={5}>
                    <Stack align="center">
                        <Badge variant="solid"
                            colorScheme="green"
                            rounded="full" px={2}>
                            GeeksForGeeks
                        </Badge>
                    </Stack>
                    <Stack align="center">
                        <Text as="h2"
                            fontWeight="normal"
                            my={2} >
                            A Computer Science Portal for Geeks
                        </Text>
                        <Text fontWeight="light">
                            A platform for students to study CSE concepts.
                        </Text>
                    </Stack>
                    <Flex>
                        <Spacer />
                        <Button variant="solid"
                            colorScheme="green" size="sm">
                            Learn More
                        </Button>
                    </Flex>
                </Box>
            </Box>
        </div>
    );
}

export default App;

Step to Run Application:
Step 1:  Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000