FreeNavigation

Progress Stepper

Use this component to show progress through multi-step flows such as onboarding, checkout, project setup, or launch review.

ReactTailwind CSSMotionStepper

1Idea

2Design

3Build

4Launch

Overview

A horizontal progress stepper for onboarding, checkout, and project workflows.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ProgressStepper />

Progress Stepper.tsx

tsx

"use client";

import { motion } from "framer-motion";

const steps = ["Idea", "Design", "Build", "Launch"];

export function ProgressStepper() {
  return (
    <div className="flex w-full max-w-xl items-center">
      {steps.map((step, index) => (
        <div key={step} className="flex flex-1 items-center">
          <div className="flex flex-col items-center gap-2">
            <motion.span initial={{ scale: 0.8 }} whileInView={{ scale: 1 }} viewport={{ once: true }} className={"flex h-10 w-10 items-center justify-center rounded-full text-xs font-black " + (index < 3 ? "bg-lime-300 text-zinc-950" : "bg-zinc-900 text-zinc-400")}>
              {index + 1}
            </motion.span>
            <span className="text-xs text-zinc-400">{step}</span>
          </div>
          {index < steps.length - 1 && <div className={"mx-2 h-px flex-1 " + (index < 2 ? "bg-lime-300" : "bg-zinc-800")} />}
        </div>
      ))}
    </div>
  );
}