Stepperize

Define your steps once. Use the generated hook, provider, or primitives anywhere in your React UI.

Stepperize is for flows where the user moves through named steps: checkout, onboarding, account setup, surveys, import wizards, approval flows, and multi-step forms.

import { defineStepper } from "@stepperize/react";

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

function Checkout() {
  const stepper = checkout.useStepper();

  return (
    <section>
      <h2>{stepper.current.title}</h2>

      {stepper.match({
        shipping: () => <Shipping />,
        payment: () => <Payment />,
        review: () => <Review />,
      })}

      <button type="button" disabled={!stepper.canPrev} onClick={() => stepper.prev()}>
        Back
      </button>
      <button type="button" disabled={!stepper.canNext} onClick={() => stepper.next()}>
        Next
      </button>
    </section>
  );
}

That is the whole idea: one typed definition drives everything — the hook, the provider, the primitives, and exhaustive rendering, all sharing the same step ids.

Get started

Install in 60 seconds

Add the package and create your first typed flow.

Build your first stepper

A working three-step flow you can paste into your app.

Understand the instance

The flat object that powers everything — explored live.

Steal a styled UI

A gallery of copy-paste stepper blocks built on the primitives.

How it grows with you

You can stop at the first layer that solves your problem:

Local — useStepper() in one component, your own markup. Most flows start and end here.
Guarded — add beforeStepChange when a move needs validation or saving.
Drafts — add data when steps need per-step data for review or persistence.
Shared — move to Provider when the header, panel, and footer are separate components.
Primitives — use Stepper.* for a fully accessible, styled stepper UI.

Each layer is additive. You never rewrite — you reach for the next tool when you need it.

Introduction