Components
Stepper

Components

Tailwind CSS Stepper

The Stepper Component offers a clear representation of progress in a multi-step process, such as a wizard or a form with multiple sections. It guides users through each step, providing visual cues about their current position and the remaining steps.

Basic usage

Static

A static stepper usage.

1

Step
2

Step
3

Step

Linear

Linear stepper example.

1 Step
2 Step
3 Step

Responsive

This stepper example is horizontally aligned above md resolution and vertically below.

Reduce browser size to see it in action

1

Step
This is a description text.
2

Step
This is a description text.
3

Step
This is a description text.

Linear example is also horizontally aligned above md resolution and vertically below.

Reduce browser size to see it in action

1 Step
2 Step
3 Step

Types

White

White stepper example.

1 Step
2 Step
3 Step

Solid

Solid stepper example.

1 Step
2 Step
3 Step

Alignment

Center

Center aligned stepper.

1
2
3

Working with icon and avatar

You can also add additional elements, such as an avatar image or icons.

Step
Step
Loading... Step

Dynamic form

Dynamic Linear

Requires JS

Note that this component requires the use of our Stepper plugin, else you can skip this message if you are already using Preline UI as a package.

A dynamic stepper example that guides users through the steps of a task.

1 Step
2 Step
3 Step

First content

Non-linear

With a "Complete Step" button.

1 Step
2 Step
3 Step

Final content

Skipped

A skip button step example.

1 Step
2 Step
3 Step

Final content

Active

Active stepper example.

1 Step
2 Step
3 Step

Second content

Error

Error stepper example.

1 Loading... Step
2 Loading... Step
3 Loading... Step

Second content

<script>
                        (function () {
                          window.addEventListener('load', () => {
                            const errorStepper = HSStepper.getInstance('#error-stepper');
                            let errorSuccessState = 1;
                            
                            errorStepper.on('beforeNext', (ind) => {
                              if (ind === 2) {
                                errorStepper.setProcessedNavItem(ind);
                            
                                setTimeout(() => {
                                  errorStepper.unsetProcessedNavItem(ind);
                                  errorStepper.enableButtons();
                            
                                  if (errorSuccessState) {
                                    errorStepper.goToNext();
                                  } else {
                                    errorStepper.setErrorNavItem(ind);
                                  }
                            
                                  errorSuccessState = !errorSuccessState;
                                }, 2000);
                              }
                            });
                          });
                        })();
                      </script>

Success

Success stepper example.

1 Step
2 Step
3 Step

Final content

Destroy and Reinitialize New

Provides destroy method that helps to destroy a stepper.

1 Step
2 Step
3 Step

First content