sleekstepper/src/Components/SleekStepper.jsx

A stylish and customizable stepper component for React, styled with **Tailwind CSS**. This component allows you to visually track steps in a process, such as order tracking or multi-step forms, with sleek progress indicators and themeable customization.

import React, { useState } from "react";

const SleekStepper = ({ steps, currStep, className, theme }) => {
  const [currentStep, setCurrentStep] = useState(currStep);
  return (
    <div className={`flex justify-center items-center ${className}`}>
      {steps?.map((elem, index) => {
        return (
          <>
            <div className="flex  flex-col justify-center  items-center">
              <div className="flex w-full justify-center items-center">
                <div
                  className={`w-fit text-white  rounded-full h-[1.5rem] ${
                    index <= currentStep
                      ? theme || "bg-green-500"
                      : " bg-gray-500"
                  } text-white  text-center `}
                >
                  {index <= currentStep ? "✔" : ""}
                </div>
                {index !== steps?.length - 1 ? (
                  <div
                    className={`w-full h-[0.2rem] ${
                      index < currentStep
                        ? theme || "bg-green-500"
                        : "bg-gray-500"
                    }`}
                  ></div>
                ) : (
                  <div className=" w-[100%] h-0 bg-gray-500"></div>
                )}
              </div>
              <div className="pr-20 max-[600px]:pr-5 font-bold">{elem}</div>
            </div>
          </>
        );
      })}
      {/* <div className="my-5">{steps[currentStep]}</div> */}
    </div>
  );
};

export default SleekStepper;