Thread Stepper

Navigation 11

About

A horizontal multi-step progress indicator drawn as a thread running through beads, used for wizards and multi-step forms where users can click back to a completed step.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thread Stepper to your project and fits it to your theme.

Code

How Thread Stepper is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ThreadStepper from "@/components/ui/thread-stepper";
import { useState } from "react";

const STEPS = [
  { id: "account", title: "Account", hint: "Email and password" },
  { id: "profile", title: "Profile", hint: "Tell us about you" },
  { id: "team", title: "Team", hint: "Invite colleagues" },
  { id: "launch", title: "Launch", hint: "Review and go" },
];

export default function Demo() {
  const [i, setI] = useState(1);
  return (
    <div className="flex min-h-full w-full flex-col items-center justify-center gap-10 bg-[#0b080d] p-8 text-[#efe8dc]">
      <div className="w-full max-w-xl">
        <ThreadStepper steps={STEPS} current={i} onChange={setI} />
      </div>
      <div className="flex gap-3">
        <button
          type="button"
          onClick={() => setI((n) => Math.max(0, n - 1))}
          className="h-10 rounded-md border border-white/15 px-4 text-sm text-[#efe8dc] hover:border-white/30 disabled:opacity-40"
          disabled={i === 0}
        >
          Back
        </button>
        <button
          type="button"
          onClick={() => setI((n) => Math.min(STEPS.length, n + 1))}
          className="h-10 rounded-md bg-[#efe8dc] px-4 text-sm font-medium text-[#0b080d] disabled:opacity-40"
          disabled={i >= STEPS.length - 1}
        >
          Continue
        </button>
      </div>
    </div>
  );
}