The type-safe way to build multi-step flows in React.

const steps = ["shipping", "payment", "review"];
const [step, setStep] = useState(0);

// clamp by hand, every time
const next = () => setStep((s) =>
  Math.min(s + 1, steps.length - 1));

// stringly-typed — typo still compiles
switch (steps[step]) {
  case "shiping": return <Shipping />;  // 💥
  case "payment": return <Payment />;
  // forgot review? no warning.
}

const checkout = defineStepper([
  { id: "shipping" },
  { id: "payment" },
  { id: "review" },
]);

const stepper = checkout.useStepper();

// call from your Next button
const onNext = () => stepper.next();

// exhaustive — a typo is a compile error
return stepper.match({
  shipping: () => <Shipping />,
  payment: () => <Payment />,
  review: () => <Review />,
});