Stepper

A horizontal onboarding stepper that animates a filled circle and connector line between numbered steps as the active step changes.

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

import Stepper from "@/components/ui/stepper";

export default function StepperDemo() {
  return (
    <div className="relative flex h-40 w-full max-w-md items-center justify-center">
      <Stepper steps={["Account", "Plan", "Done"]} activeIndex={1} />
    </div>
  );
}