tailwind css stepper component

React Tailwind Stepper Component

Abdul Basit OnLinkedIn

April 03, 2024•3 min read

On This Page

A stepper is needed for Multi-Step Processes, for example in ecommerce checkout or in any kind of form completion.

So its better to use pre build functional stepper component with react and tailwind, and save development time.

The good thing about tailwind is its really handy to add css properites, we don't have to move back and forth to css file.

Here's what the stepper component looks like:

React Tailwind Css Stepper Component

Tailwind CSS Stepper Component Code

import { useState } from 'react'

interface Step {
  label: string
  step: number
}

interface StepperProps {
  steps: Step[]
}

const Stepper: React.FC<StepperProps> = ({ steps }) => {
  const [activeStep, setActiveStep] = useState(1)

  const nextStep = () => {
    setActiveStep((prevStep) => prevStep + 1)
  }

  const prevStep = () => {
    setActiveStep((prevStep) => prevStep - 1)
  }

  const totalSteps = steps.length

  const width = `${(100 / (totalSteps - 1)) * (activeStep - 1)}%`

  return (
    <div className="w-full max-w-2xl mx-auto px-4 pb-10">
      <div className="flex justify-between mt-14 relative before:bg-slate-200 before:absolute before:h-1 before:top-1/2 before:transform-y-1/2 before:w-full before:left-0">
        {steps.map(({ step, label }) => (
          <div className="relative z-10" key={step}>
            <div
              className={`size-16 rounded-full border-2 bg-white border-zinc-200 flex justify-center items-center transition-all ease-in delay-200 ${
                activeStep >= step ? 'border-slate-400' : ''
              }`}>
              {activeStep > step ? (
                <div className="text-2xl font-semibold text-slate-400 rotate-45 -scale-x-100">
                  L
                </div>
              ) : (
                <span className="text-lg text-zinc-400 font-medium">{step}</span>
              )}
            </div>
            <div className="absolute top-24 left-1/2 -translate-y-2/4 -translate-x-2/4">
              <span className="text-lg text-zinc-400 font-semibold">{label}</span>
            </div>
          </div>
        ))}
        <div
          className="absolute h-1 bg-slate-400 w-full top-1/2 transform-y-1/2 transition-all ease-in delay-200 left-0"
          style={{ width: width }}></div>
      </div>
      <div className="flex justify-between mt-28">
        <button
          className="border disabled:bg-gray-300 disabled:text-gray-700 disabled:cursor-not-allowed bg-gray-500 hover:bg-gray-600 text-white px-8 py-1.5 rounded-md font-medium text-base"
          onClick={prevStep}
          disabled={activeStep === 1}>
          Previous
        </button>
        <button
          className="border disabled:bg-gray-300 disabled:text-gray-700 disabled:cursor-not-allowed bg-gray-500 hover:bg-gray-600 text-white px-8 py-1.5 rounded-md font-medium text-base"
          onClick={nextStep}
          disabled={activeStep === totalSteps}>
          Next
        </button>
      </div>
    </div>
  )
}

export default Stepper

Data Structure for Stepper Component

To use this stepper component, you need to pass data to it as props. It's helpful to keep this data separate, maybe in its own file, to keep the code organized.

export const steps = [
  {
    label: 'Address',
    step: 1,
  },
  {
    label: 'Shipping',
    step: 2,
  },
  {
    label: 'Payment',
    step: 3,
  },
  {
    label: 'Summary',
    step: 4,
  },
]

How to use in Parent Component

And here's how you use it in a parent component

import Stepper from './components/Stepper'

function App() {
  return (
    <>
      <Stepper steps={steps} />
    </>
  )
}

export default App

If you find this helpful, let me know your thoughts and suggestions.

Read Next

Ship your startup in days, not weeks

The NextJS boilerplate with all you need to build your SaaS, AI tool, blog, or any other web app.

From idea to production in 5 minutes.

$100 off for the first 2290 customers (10 left)