Building a Dynamic Stepper Component with React.js and Tailwind CSS: A Step-by-Step Guide

Stepper Component with React.js and Tailwind CSS:

Stepper.js

import React, { useState } from "react";
import "./stepper.css";
import { TiTick } from "react-icons/ti";
const Stepper = () => {
  const steps = ["Customer Info", "Shipping Info", "Payment", "Step 4"];
  const [currentStep, setCurrentStep] = useState(1);
  const [complete, setComplete] = useState(false);
  return (
    <>
      <div className="flex justify-between">
        {steps?.map((step, i) => (
          <div
            key={i}
            className={`step-item ${currentStep === i + 1 && "active"} ${
              (i + 1 < currentStep || complete) && "complete"
            } `}
          >
            <div className="step">
              {i + 1 < currentStep || complete ? <TiTick size={24} /> : i + 1}
            </div>
            <p className="text-gray-500">{step}</p>
          </div>
        ))}
      </div>
      {!complete && (
        <button
          className="btn"
          onClick={() => {
            currentStep === steps.length
              ? setComplete(true)
              : setCurrentStep((prev) => prev + 1);
          }}
        >
          {currentStep === steps.length ? "Finish" : "Next"}
        </button>
      )}
    </>
  );
};

export default Stepper;

.css file

.step-item {
  @apply relative flex flex-col justify-center items-center w-36;
}
.step-item:not(:first-child):before {
  @apply content-[''] bg-slate-200 absolute w-full h-[3px] right-2/4 top-1/3 -translate-y-2/4;
}
.step {
  @apply w-10 h-10 flex items-center justify-center z-10 relative bg-slate-700 rounded-full font-semibold text-white;
}
.active .step {
  @apply bg-sky-600;
}
.complete .step {
  @apply bg-green-600;
}
.complete p {
  @apply text-white;
}
.complete:not(:first-child):before,
.active:not(:first-child):before {
  @apply bg-green-600;
}

1. Introduction

Briefly introduce the purpose of the code.
Mention that it's a React.js component using Tailwind CSS to create a stepper with a dynamic number of steps.

2. Tailwind CSS Code for Stepper

Styling .step-item:
Using @apply to add Tailwind CSS utility classes.
Styling for a flex container with centered content.
Adding a vertical line between steps using :before pseudo-element.
Styling .step:
Styling for individual steps (circles) within the stepper.
Conditional styling for active and completed steps.

3. React.js Code for Stepper

State Initialization:

Using React Hooks (useState) to manage the component's state.
steps: An array representing the titles of each step.
currentStep: State to track the current step.
complete: State to determine if all steps are completed.
Rendering Steps:

Mapping through the steps array to render each step.
Conditional application of styles based on the current step and completion status.
Rendering Step Content:

Utilizing conditional rendering to display a checkmark for completed steps.
Displaying the step number if it's not completed, or a checkmark if it is.
Next/Finish Button:

A button is rendered conditionally.
If it's the last step, the button text is "Finish," otherwise "Next."
The button click updates the state accordingly.

4. Integration of External Libraries

Importing TiTick from react-icons/ti:
Using the TiTick icon from the react-icons library to represent completion.

5. Conclusion

Summarize the key features and functionalities of the code.
Highlight any additional points or considerations.

6. Potential Improvements or Next Steps

Suggest any potential improvements or additional features that could be added to enhance the stepper component.
This structure provides a comprehensive explanation of your code, making it easier for readers to understand each aspect of the implementation.

Youtube Video: