1. Components
  2. 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.

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

White

White stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

Solid

Solid stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

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.

  • Avatar Step
  • Step
  • Loading... Step

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

Second content

Third content

Final content

Non-linear

With a "Complete Step" button.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Skipped

A skip button step example.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Active

Active stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

Second content

Third content

Final content

Error

Error stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Success

Success stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content