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

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

Define steps

Call defineStepper with your step configurations:

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" }
);

id (required): Unique identifier for each step
Add any custom properties (e.g., title, description) for use in your UI

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

Next Steps

Learn how to use the returned components and hooks:

useStepper Hook
Scoped Component

Usage

Import

Define steps

Return Value

Next Steps

On this page