Segmented Progress Pill Stepper

A multi-step form stepper with a spring-animated progress pill that slides across rounded segments, clickable step labels, and animated content transitions between steps.

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

import Stepper04 from "@/components/ui/stepper-04";

export default function Stepper04Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-4">
      <Stepper04 />
    </div>
  );
}