Define

Create a fully-typed stepper with defineStepper

defineStepper creates a stepper from your step definitions. You pass one object per step (as separate arguments). It returns typed Stepper (primitives), Scoped, useStepper, and steps.

Basic usage

import {  } from "@stepperize/react";

const { , , ,  } = (
  { : "shipping", : "Shipping", : "Enter your address" },
  { : "payment", : "Payment", : "Payment details" },
  { : "confirmation", : "Confirmation", : "Review order" }
);

Each step must have a unique id. You can add any custom properties (title, description, icon, etc.) for your UI.

Return value

PropertyTypeDescription
stepsStepsThe array of step objects you passed (same order as arguments)
useStepper(props?: { initialStep?, initialMetadata? }) => Stepper<Steps>Hook for state, navigation, lookup, flow, metadata, lifecycle (Hook)
Scoped(props: ScopedProps<Steps>) => ReactElementProvider for stepper context; props: initialStep?, initialMetadata?, children (Scoped)
StepperStepperPrimitives<Steps>Type-safe UI primitives: Root, List, Item, Trigger, Title, Description, Indicator, Separator, Content, Actions, Prev, Next (Primitives)

Next steps

  • Primitives – Build the stepper UI
  • useStepper – State, navigation, lookup, flow, metadata
  • Scoped – Share stepper state
  • Lookup – Step lookup (via stepper.lookup or generateStepperUtils from core)
Edit on GitHub

Last updated on

My first stepper

Build a minimal stepper using defineStepper and useStepper

Primitives

Type-safe primitive components for building stepper UIs

On this page

Basic usage
Return value
Next steps