ReactJS Chakra-UI Card Component
Chakra UI is a modern component library for React created by Segun Adebayo to build front-end applications. It provides accessibility, simplicity, and modularity making it a powerful library with over 50 components. Chakra UI comes with concise and scrutable documentation making it easier to build an accessible component and speed up the building process. At the time of writing the Chakra-UI GitHub repository has 19.4k stars and has been forked 1.6k times. If you are a fan of emoticon and styled-system then adopting Chakra is a no-brainer, the library is built using those technologies as the foundation. In this article, we’ll learn how to create a card component using Chakra-UI.
Approach: 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 Box, Image, Stack, Badge, Flex, Spacer and Text components.
- 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.
Creating 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:
Step 3: After creating the ReactJS application, Install Chakra UI modules using the following command:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Project Structure: It will look like the following.
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.
Step to Run Application:
Run the application using the following command from the root directory of the project.
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.