Define

defineStepper is the core function for creating a customizable stepper. It generates the necessary components and hooks for building your stepper UI and managing its state.

Usage

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

const { Scoped, useStepper, steps } = defineStepper(
  { id: "step-1", title: "Step 1", description: "First step" },
  { id: "step-2", title: "Step 2", description: "Second step" },
  { id: "step-3", title: "Step 3", description: "Third step" }
);

Return Value

defineStepper returns an object with:

• Scoped: A Provider component for scoping stepper state
• useStepper: A custom hook for accessing and controlling the stepper
• steps: An array of the defined step objects
• utils: Pure utility functions for working with steps

Next Steps

Learn how to use the returned components and hooks:

• useStepper Hook
• Scoped Component