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:
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 @emotion/styled@^11 framer-motion@^4
Project Structure: It will look like the following.
Project Structure
Below is the implementation of the above approach:
Example:
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= 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; |
For Chakra UI to work, you need to set up the ChakraProvider at the root of your application.
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') ); |
Step to Run Application:
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/, you will see the following output.
Reference: https://chakra-ui.com/docs/getting-started
