Chakra UI Navigation Stepper
Chakra UI Navigation Stepper is a versatile and user-friendly component designed to facilitate smooth navigation within web applications and also used to indicate progress through a multi-step process. With a focus on simplicity and customization, Chakra UI Stepper seamlessly integrates into Chakra UI, a popular React component library. It empowers developers to create intuitive step-by-step navigation, enhancing user experience by providing clear progress indicators within complex processes or workflows.
Prerequisites:
Approach:
We will build different types of Navigation Steppers using Chakra UI with ReactJS. The Chakra UI Stepper component provides various functionalities such as Step, StepDescription, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle allowing developers to customize the appearance and behavior of the stepper according to their requirements.
Steps to Create the Project:
Step 1: Create a React application using the following command:
npx create-react-app gfg
Step 2: After creating your project folder(i.e. my-app), 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@^11 @emotion/styled@^11 framer-motion@^6
Project Structure:
The updated dependencies in package.json will look like this:
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@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",
"web-vitals": "^2.1.4"
}
Example: Below is the basic example of the Chakra UI Navigation Stepper:
Javascript
// App.js import { ChakraProvider, Box, Text } from "@chakra-ui/react" ; import { Step, StepDescription, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle, Stepper, useSteps, } from '@chakra-ui/react' ; const steps = [ { title: 'First' , description: 'Contact Info' }, { title: 'Second' , description: 'Date & Time' }, { title: 'Third' , description: 'Select Rooms' }, ] function App() { const { activeStep } = useSteps({ index: 1, count: steps.length, }) return ( <ChakraProvider> <Box w= "55%" mx= "auto" > <Text color= "#2F8D46" fontSize= "1.4rem" textAlign= "center" fontWeight= "400" my= "1rem" mt= "2rem" > Horizontal Navigation Stepper </Text> <Stepper index={activeStep}> {steps.map((step, index) => ( <Step key={index}> <StepIndicator> <StepStatus complete={<StepIcon />} incomplete={<StepNumber />} active={<StepNumber />} /> </StepIndicator> <Box flexShrink= '0' > <StepTitle>{step.title}</StepTitle> <StepDescription> {step.description} </StepDescription> </Box> <StepSeparator /> </Step> ))} </Stepper> <Text color= "#2F8D46" fontSize= "1.4rem" textAlign= "center" fontWeight= "400" my= "1rem" mt= "2rem" > Vertical Navigation Stepper </Text> <Stepper index={activeStep} orientation= 'vertical' height= '400px' gap= '0' > {steps.map((step, index) => ( <Step key={index}> <StepIndicator> <StepStatus complete={<StepIcon />} incomplete={<StepNumber />} active={<StepNumber />} /> </StepIndicator> <Box flexShrink= '0' > <StepTitle>{step.title}</StepTitle> <StepDescription> {step.description} </StepDescription> </Box> <StepSeparator /> </Step> ))} </Stepper> </Box> </ChakraProvider> ) } export default App; |
Steps to run the application:
npm start
Output:
Contact Us