Simplifying Multi-Step Processes in React

Stepperize is a versatile React library designed to streamline the creation of Stepper components. It empowers developers to build complex, multi-step processes with ease, allowing them to focus on business logic rather than implementation details.

Key Features

• Type-Safe Primitives: Fully typed components for building accessible stepper UIs
• Flexible Step Management: Navigate with next/prev/goTo and optional onBeforeTransition / onAfterTransition callbacks to validate or run logic on step change
• Headless Component: Full control over styling and UI
• React Native Compatible: Build steppers for web and mobile apps
• Conditional Rendering: Step-based content with flow.switch(), Stepper.Content, or flow.is(id)
• State Management: Built-in tools for handling step state, metadata, and status
• Async Support: Optional async onBeforeTransition / onAfterTransition callbacks

Core Concepts

Thinking in Steps

Steppers break down complex workflows into manageable chunks, providing:

• Clear navigation between steps
• Visual progress indicators
• Improved user experience for multi-stage processes

Common Use Cases

• User onboarding
• Multi-page forms
• E-commerce checkout
• Product creation wizards
• Tutorial walkthroughs
• Surveys and questionnaires
• Booking systems

Thinking in Flows

Stepperize goes beyond linear progressions, enabling:

• Conditional rendering
• Branching paths
• Dynamic form adjustments
• Personalized user experiences
• State-dependent UI changes
• Multi-path processes

Use stepper.flow.switch({ stepId: () => <Panel /> }) or stepper.flow.is('payment') to render by step.

What's Next

• Installation
• My first stepper
• API Reference - defineStepper
• API Reference - Primitives
• API Reference - useStepper
• Examples