Basic Examples

Explore various usage patterns of Stepperize in React applications.

Horizontal Stepper

The horizontal stepper is the most common and straightforward implementation of Stepperize. It provides a linear progression through a series of steps, ideal for workflows or multi-step forms.

Key features:

  • Horizontal layout
  • Simple navigation using the switch method

Live Demo

Vertical Stepper

For interfaces with limited horizontal space or when you need to display more detailed information for each step, the vertical stepper is an excellent choice.

Key features:

  • Vertical layout
  • Suitable for mobile interfaces or sidebars

Live Demo

Custom Circular Stepper

Stepperize allows for extensive customization. This example showcases a circular stepper design, demonstrating how you can tailor the appearance to match your application's aesthetic.

Key features:

  • Custom circular step indicators
  • Flexible layout options

Live Demo

Usage Tips

  • Use the switch method to programmatically change steps
  • Customize the appearance using CSS, Tailwind CSS, or any other styling library
  • Combine with form libraries for complex multi-step forms
  • Implement validation logic between steps for guided user experiences
Edit on GitHub

Last updated on

Previous

Utils

Next

Scoped Stepper

On this page