Chakra UI Data Display Divider

Chakra UI Data Display Divider is the component that provides a way to add a custom divider line to split the contents. We can split or separate the contents in a list of the group. There are various types of dividers that the Chakra UI Data Display Divider component offers. In this article, we will see all of the types along with the practical demonstration in terms of examples and their live output.

Prerequisites:

• NPM & Node JS
• React JS
• React JS Chakra UI

Approach:

We have created different types of dividers like Horizontal, Vertical with Text, Colored with custom size based like XL, LG, MD, Content insider Divider, Composition with Stack-based, and Dash-based dividers with size. Using this customization we can make the dividers more colorful and more customizable according to the application’s behavior and requirements.

Steps to Create React Application And Installing Module:

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

npx create-react-app chakra

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

cd chakra

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

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

Project Structure:

The updated dependencies are 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: Below is the practical implementation of the Chakra UI Feedback Spinner:

Javascript

// App.js file
import React from 'react'
import {
    ChakraProvider, Box, Stack,
    Text, Divider, AbsoluteCenter
} from '@chakra-ui/react';

const App = () => {

    return (
        <>
            <ChakraProvider>
                <Box p={8}>
                    <Text as="h1" fontSize="3xl"
                        color="green.500" fontWeight="bold"
                        mb={4}>
                        GeeksforGeeks
                    </Text>
                    <Text as="h3" fontSize="xl"
                        color="gray.600" mb={8}>
                        Chakra UI Data Display Divider
                    </Text>
                    <Stack spacing={2}>
                        <Text fontSize="lg" fontWeight="bold"
                            color="teal">
                            Divider Type: Basic Horizontal
                        </Text>
                        <Divider size="lg" borderWidth="6px"
                            borderColor="teal" />
                    </Stack>
                    <Stack direction='row' align='center'
                        mt={8} spacing={8}>
                        <Text fontSize="lg" fontWeight="bold"
                            color="purple">
                            Divider Type: Vertical with Text
                        </Text>
                        <Divider orientation='vertical' size="lg"
                            borderWidth="6px" borderColor="pink" />
                        <Text fontSize="lg" fontWeight="bold"
                            color="orange">
                            Section 2
                        </Text>
                    </Stack>
                    <Stack direction='column' mt={8} spacing={8}>
                        <Text fontSize="lg" fontWeight="bold"
                            color="cyan">
                            Divider Type: Custom Colored and Sized (XL)
                        </Text>
                        <Divider size='xl' borderWidth="6px"
                            borderColor='cyan' />
                        <Text fontSize="lg" fontWeight="bold"
                            color="red">
                            Divider Type: Custom Colored and Sized (LG)
                        </Text>
                        <Divider size='lg' borderWidth="6px"
                            borderColor='red' />
                        <Text fontSize="lg" fontWeight="bold"
                            color="green">
                            Divider Type: Custom Colored and Sized (MD)
                        </Text>
                        <Divider size='md' borderWidth="6px"
                            borderColor='green' />
                    </Stack>
                    <Box position='relative' padding='10'
                        mt={8}>
                        <Stack spacing={2}>
                            <Divider size="lg" borderWidth="6px"
                                borderColor="blue" />
                            <AbsoluteCenter bg='white' px='4'>
                                GeeksforGeeks is Great
                            </AbsoluteCenter>
                        </Stack>
                    </Box>
                    <Stack direction='row' h='100px' p={8} mt={8}>
                        <Text fontSize="lg" fontWeight="bold"
                            color="purple">
                            Divider Type: Composition with Stack
                        </Text>
                        <Divider orientation='vertical' size="xl"
                            borderWidth="6px" borderColor="purple" />
                        <Text fontSize="2xl" fontWeight="bold"
                            color="purple">
                            Chakra UI
                        </Text>
                    </Stack>
                    <Stack direction='column' mt={8} spacing={8}>
                        <Text fontSize="lg" fontWeight="bold"
                            color="yellow">
                            Divider Type: Dashed Variant (LG)
                        </Text>
                        <Divider variant='dashed' size="lg"
                            borderWidth="6px" borderColor="yellow" />
                        <Text fontSize="lg" fontWeight="bold"
                            color="purple">
                            Divider Type: Dashed Variant (MD)
                        </Text>
                        <Divider variant='dashed' size="md"
                            borderWidth="6px" borderColor='purple' />
                    </Stack>
                </Box>
            </ChakraProvider>
        </>
    )
}

export default App;

Step to run the Application:

npm start 

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