Creating a User-Friendly Roadmap with Chakra UI Stepper: A Comprehensive Guide

RoadMap

Step 1: Install the required dependencies.

npm i @chakra-ui/react

npm i @chakra-ui/react

Step 2: Create “Example.js” inside your Components directory

// components/Example.js
import {
  Step,
  StepDescription,
  StepIcon,
  StepIndicator,
  StepNumber,
  StepSeparator,
  StepStatus,
  StepTitle,
  Stepper,
  useSteps,
  ChakraProvider,
  extendTheme,
  Box,
} from "@chakra-ui/react";

const steps = [
  { title: "First Phase", description: "The certification program commences." },
  {
    title: "Second Phase",
    description:
      "After finishing the articles, share the final photo on LinkedIn by tagging Bunnyfiedlabs.",
  },
  {
    title: "Third Phase",
    description:
      "Send an email to info@bunnyfiedlabs.com containing all the necessary proofs.",
  },
  {
    title: "Fourth Phase",
    description:
      "Accept the internship project challenge and proceed with the implementation of the provided project.",
  },
  {
    title: "Last Phase",
    description: "Submit the project and await the results.",
  },
];

function Example() {
  // The right tick will change when you change this index
  const { activeStep } = useSteps({
    index: 2,
    count: steps.length,
  });

  const theme = extendTheme({
    styles: {
      global: {
        body: {
          bg: "green.500", // replace with the desired background color
          margin: 10,
        },
      },
    },
  });

  return (
    <ChakraProvider theme={theme}>
      <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 color={"black"}>
                {step.description}
              </StepDescription>
            </Box>

            <StepSeparator />
          </Step>
        ))}
      </Stepper>
    </ChakraProvider>
  );
}

export default Example;

Example.js

The given code demonstrates the usage of Chakra UI’s Step,StepDescription,StepIcon,StepIndicator,StepNumber,StepSeparator, StepStatus,StepTitle,Stepper,useSteps and Box components. Here's an explanation of the code:

• The ChakraProvider wraps the components to enable Chakra UI styling and theming.
• extendTheme: This function is used to customize the Chakra UI theme and set the global styles, in this case, changing the background color of the body to "green.500".
• steps is an array of objects that represent the steps in the roadmap. Each object has a title and a description, which will be displayed for each step in the stepper.
• The useSteps hook from Chakra UI is used to manage the active step. It takes an object with two properties:
  –index: The index of the active step (in this case, it's set to 2, which corresponds to the second step).
  –count: The total number of steps, which is the length of the steps array.
• The Stepper component is the main container for the entire roadmap. It takes several props:
  –index: The active step index provided by the useSteps hook.
  –orientation: The orientation of the stepper, set to 'vertical' to create a vertical roadmap.
  –height: The height of the stepper container, set to '400px' to restrict the height of the roadmap.
  –gap: The gap between each step, set to '0' to remove any spacing between the steps.
• Inside the Stepper, a map function is used to iterate over the steps array and create a Step component for each step.
• Each Step component represents an individual step in the roadmap.
• Inside the Step, the StepIndicator component is used to define how the step's status is displayed. It includes the StepStatus component, which changes its appearance based on the step's status:
  –complete: If the step is completed, it shows a StepIcon.
  –incomplete: If the step is not yet completed, it shows a StepNumber.
  –active: If the step is the currently active step, it also shows a StepNumber.
• The Box component is used to wrap the StepTitle and StepDescription components. The StepTitle displays the step's title, and the StepDescription displays the step's description.
• Finally, the StepSeparator component is used to add a visual separator between each step.

That’s the complete explanation of the provided Example.js code. It demonstrates how to use Chakra UI's Stepper component to create a vertical roadmap with steps, each having a title, description, and visual indicators for status.

Step 3: Create a new page StepperPage.js and call the Example component inside this page.

import { Box } from "@chakra-ui/react";
import Example from "../components/Example";

export default function StepperPage() {
  return (
    <Box p={4}>
      <Example />
    </Box>
  );
}

StepperPage.js

• The Example component is rendered, which in turn renders the Stepper components of the Chakra UI along with their configurations.

Step 4: Run your application

npm run dev

Navigate: http://localhost:3000/StepperPage

Stepper page

Congratulations on learning how to use the Stepper in ChakraUI! I hope you will soon have the opportunity to apply this knowledge to your projects. Keep up the great work!

Building Instagram/Twitter-like Post UI with Chakra UI in Next.js: A Comprehensive Guide

Create your own MetaVerse Using ThreeJS

Animations

Animate your own Avatar for ThreeJS Metaverse

If you enjoyed this article and are interested in learning more about Next.js, I have compiled a list of articles that will take you from beginner to expert. This carefully curated selection of resources will help you to deepen your understanding of Next.js and develop the skills you need to be successful with this framework. I encourage you to embark on this journey and unlock your full potential as a Next.js developer.

Building your portfolio?

https://portfolio.bunnyfiedlabs.com/?ref=ashish-negi

Create a professional portfolio and resume in minutes using our free portfolio builder:

PortfolioKit - Build Your Personal Portfolio in Minutes

In Plain English

Get Ashish Negi’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us on Twitter, LinkedIn, YouTube, and Discord.