Multi-step Form

A numbered step indicator with connecting progress lines above a swappable field panel — for onboarding or checkout flows too long for a single screen.

Account

Profile

Confirm

Forms & Inputsstepperwizardonboardingmulti-step

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Dependencies: lucide-react

Overview

Layout

Step-circle row with connecting lines, panel, back/next footer

Step states

Completed = filled + check icon; current = ring; upcoming = outline

Connector

Line between two steps fills bg-primary once the left one completes

Navigation

Back disabled on step one; final step's button reads "Submit"

Multi-step Form

Overview

Prompt