Step Indicator

Horizontal stepper that shows where someone is in a fixed sequence — numbered circle markers joined by a connecting line, each drawn as complete (filled, with a check), current (ringed and highlighted) or upcoming (muted). Pass the steps and a current index and it derives every state; there is nothing to keep in sync by hand. Reach for it at the top of anything multi-step: a checkout or cart flow, a signup and onboarding wizard, account or workspace setup, a KYC or identity-verification flow, a document or tax filing, a multi-page form split across screens, an upload-then-review-then-publish pipeline, a survey or quiz, or an installer. Common asks it answers: "stepper component", "step indicator react", "multi-step form progress", "wizard steps ui", "checkout progress bar with steps", "onboarding progress indicator", "shadcn stepper", "progress steps 1 2 3", "form wizard header", "onboarding steps", "onboarding progress react", "signup flow progress", "step by step progress ui", "horizontal stepper react", "numbered steps component", "progress tracker steps", "step rail", "breadcrumb style steps", "step 2 of 5 indicator", "show which step the user is on", "wizard navigation header", "checkout steps cart shipping payment", "MUI Stepper equivalent shadcn", "antd Steps shadcn", "Mantine Stepper alternative", "Chakra Steps equivalent", "react-step-wizard alternative", "headless stepper react", "tailwind stepper", "accessible stepper aria-current step", "stepper screen reader completed current", "clickable stepper go back to a previous step", "prevent jumping ahead in a wizard", "ステッパー react", "ステップ インジケーター", "複数ステップ フォーム 進捗", "ウィザード 現在のステップ", "申し込みフロー 進捗表示", "オンボーディング 進捗", "ステップ 2/5 表示", "完了・現在・未完了 の表示", "aria-current=step ステッパー". shadcn/ui has no stepper: its progress component is a single bar with no notion of discrete stages, labels or a current position, and while its questionnaire is a multi-step flow, that component owns the questions and answers and reports its place as a plain "3 of 8" counter rather than a rail of numbered markers — so the header that shows where someone is in a sequence you already control still gets rebuilt by hand out of divs and borders. It is also not a timeline: this one counts position through a sequence that is known in advance and still to be finished, while timeline is the record of what already happened and has no current step. It is not a product tour either: a tour points at the interface and explains it, one popover at a time, while this says where somebody is in a sequence they are working through — reach for product-tour when the thing being explained is the screen, and for this one when the thing being tracked is their progress. Built as an ordered list, because the steps are an ordered list: the active one carries aria-current="step", every marker states its own status in screen-reader-only text (Completed / Current step / Not completed) rather than leaving the meaning to a colour and a tick, and the check icon is aria-hidden so it is not announced twice. Conveying stage by colour alone fails WCAG 1.4.1, which is why the status is always spelled out. Pass onStepClick and the steps already reached become real buttons with a focus-visible ring, while upcoming steps stay inert — a stepper that lets someone jump forward past validation is worse than one that is not clickable at all. Theme-aware through shadcn tokens with dark mode, and the only dependency is lucide-react for the check icon.