Multi-step flows made simple

Lightweight, type-safe library for step-by-step experiences. Minimal boilerplate, full control.

Get Started View Demo

Why Stepperize

Everything you need, nothing you don't.

Minimal API

defineStepper + useStepper. No boilerplate.

UI agnostic

Use any components. Works with any form library.

Lightweight & type-safe

Zero deps, small bundle, full TypeScript.

Open in v0

Open any stepper in v0.dev from the docs to edit and remix with AI.

shadcn/ui compatible

Designed to work with shadcn/ui. Copy-paste and go.

Headless primitives

Build accessible stepper UIs your way.

Simple to implement

Get started with a few lines.

import * as React from "react";
import {  } from "@stepperize/react";

const  = (
  { : "step-1", : "Step 1" },
  { : "step-2", : "Step 2", : "Second step" }
);

const  = () => {
  const  = .();

  return (
    < ="flex flex-col gap-4">
      < ="flex gap-4">
        < ={() => ..()}>Next</>
        < ={() => ..()}>Prev</>
      </>
      {..({
        "step-1": () => <>First: {.}</>,
        "step-2": () => (
          < ="flex flex-col gap-4">
            <>Second: {.}</>
            <>{.}</>
          </>
        )
      })}
    </>
  );
}

The useStepper hook manages the flow. Full docs →

See it in action

Multi-step form with @stepperize/react

Ready to build?

Start with Stepperize today.

GitHub NPM