Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Creating a Vertical Stepper in React

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.

In this article we will learn , how to create a vertical stepper using react and material-ui.

Creating React-app

Step 1: Create react app using the following command.

npx create-react-app my-first-app

Step 2: Change directory to that folder by executing command:

cd my-first-app


Step 3: Install the necessary dependencies. Go to the directory ‘src’ and execute command prompt there and run command.

npm install @material-ui/core/Stepper
npm install @material-ui/core/Step
npm install @material-ui/core/StepLabel

Step 4: Run your app by executing below command in src

npm start

File Structure:

File Name: App.js

Importing < GeekStepper/> component in root component


function App() {
  return (
    <div className="App">
      <GeekStepper />
export default App;

File Name: StepperForm.jsx

In this file, we will implement Stepper. In this example; We will explain the process of article publishing in GeeksforGeeks. Articles goes through 3 states

  • Pending
  • Review
  • Publish

Stepper is created using material-ui in react. We have imported different ui-classes in this component like Stepper, StepLabel etc. Stepper is implemented using preActiveStep and ActiveStep . These steps are used to display the component of form which is active and to return back.


import React from 'react';
import { makeStyles, Theme, createStyles } 
    from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme: Theme) =>
    root: {
      width: '100%',
    button: {
      marginTop: theme.spacing(1),
      marginRight: theme.spacing(1),
    actionsContainer: {
      marginBottom: theme.spacing(2),
    resetContainer: {
      padding: theme.spacing(3),
function getSteps() {
  return [<b style={{color:'red'}}>'Pending'</b>, 
      <b style={{color:'orange'}}>
  'Review'</b>, <b style={{color:'green'}}>'Published'</b>];
function getStepContent(step: number) {
  switch (step) {
    case 0:
      return `You submit an Article and it goes to Pending state `;
    case 1:
      return 'Article is reviewed';
    case 2:
      return `Hey Geek!! Your Article is Published`;
      return 'Unknown step';
export default function GeekStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();
  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  const handleReset = () => {
  return (
    <div className={classes.root}>
    <h1>GeeksforGeeks Article Publishing Process</h1>
      <Stepper activeStep={activeStep} orientation="vertical">
        {, index) => (
          <Step key={label}>
              <div className={classes.actionsContainer}>
                    disabled={activeStep === 0}
                    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
      {activeStep === steps.length && (
        <Paper square elevation={0} 
            All steps completed - your Article is Published
          <Button onClick={handleReset} className={classes.button}>

Step to run the application: Open the terminal and type the following command.

npm start


My Personal Notes arrow_drop_up
Last Updated : 20 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials