Chakra UI Borders - Coding

Chakra UI is a popular React component library that simplifies the process of building user interfaces with a set of customizable and accessible components. Among those feature it also provide support for styling and layout including the management of borders. It provides various properties to customize borders. In this article, we will learn about Implementation of borders in Chakra UI.

Prerequisites:

Approach:

We have created a UI Flex Box and inside that box we are using the Box and one button to demonstrate different styles of borders. To use a Box and Button component, we have to import it from “@chakra-ui/react” module. Chakra UI provides various props to modify the borders and border radius.

This are the some of the key props to modify the borders: border, borderWidth, borderStyle, borderColor, borderTop, borderRight, borderBottom, borderLeft, borderX, borderY and borderRadius.

Steps to Create React Application and Installing Module:

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

npx create-react-app gfg

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

cd gfg

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

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

Project Structure:

chakra-border-structure

The updated dependencies in 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": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
}

Example: The below example is demonstrating the use of Borders in Chakra UI

Javascript

//File path: src/App.js
import { Box, Button, Heading }
    from "@chakra-ui/react";
 
function App() {
    return (
        <>
            <Box textAlign="center">
                <Heading as="h1" color="green">
                    Chakra UI Borders | GeeksForGeeks
                </Heading>
            </Box>
            <Box
                m={10}
                display="flex"
                alignItems="center"
                justifyContent="space-around"
                height="70vh"
                flexWrap="wrap"
                border="2px dashed black">
 
                <Box border="5px solid red">
                    {'<Box border="5px solid red">'}
                </Box>
                <Box border="5px solid blue" borderRadius="10px">
                    {'<Box border="5px solid blue" borderRadius="10px">'}
                </Box>
                <Box border="5px dashed black">
                    {'<Box border="5px dashed black">'}
                </Box>
                <Box borderY="5px solid black">
                    {'<Box borderY="5px solid black">'}
                </Box>
                <Box borderX="5px solid black">
                    {'<Box borderX="5px solid black">'}
                </Box>
                <Box borderTop="5px solid black">
                    {'<Box borderTop="5px solid black">'}
                </Box>
                <Box borderBottom="5px solid black">
                    {'<Box borderBottom="5px solid black">'}
                </Box>
 
                <Button border="2px dotted black" borderRadius="10px">
                    {'<Button border="2px solid black" borderRadius="10px">'}
                </Button>
            </Box>
        </>
    );
}
 
export default App;

To run the application use the following command:

npm run start

Output: Now go to http://localhost:3000 in your browser:

chakra-border-output

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
How to Find LCM of 4 and 6? - Methods and Solution
Update JSON Key Name in Python
How To Save Location On Google Maps
Convert Numpy Array to Dataframe
Detect Encoding of a Text file with Python

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14