Stepper

One step closer. A smooth, editable walkthrough for your next great idea.

About this tool

A four-step walkthrough with directional slides, adaptive content height, progress connectors and previous, next and complete navigation. Edit the copy, image, labels, colors and transition speed. Includes a persistent name input, keyboard controls, reduced motion, completion events and standalone exports. Adapted from the original MIT-era React Bits Stepper by David Haz.

In collections: Navigation Components: Tabs, Steppers & Menus

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough?

UI/UX · HTML / JavaScript All tools

Navigation

Preview step

Disable indicators

off on

Back button

Next button

Complete button

Content

Step 1 title

Step 1 text

Step 2 title

Step 2 text

Step 3 title

Step 3 text

Layout

Card width px

Corner radius px

Colors

Accent

Accent text

Text

Secondary text

Input border

Surface

Motion

Transition s

Stage

Stage width px

Stage height px