About
An accessible numbered-step progress indicator for multi-step forms and checkout flows, supporting horizontal or vertical layout and optional click-to-jump-back on completed steps.
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.
Code
How Stepper is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { Stepper } from "@/components/ui/stepper";
const steps = [
{ id: "customer", label: "Customer", description: "Who is ordering" },
{ id: "items", label: "Items", description: "Products and quantities" },
{ id: "shipping", label: "Shipping", description: "Address and method" },
{ id: "review", label: "Review", description: "Confirm and submit" },
];
export default function StepperVerticalDemo() {
return (
<div className="w-full max-w-md mx-auto p-6 bg-background text-foreground">
<Stepper steps={steps} currentStep={2} orientation="vertical" />
</div>
);
}
More by sudharshanpanidev
View all
Status Badge
Button
Select
Empty State
Checkbox