Tailwind CSS Stepper

Use responsive stepper component with helper examples for stepper ui, stepper form, vertical stepper, progress steps & more. Free download, open-source license.

Basic example

Use horizontally aligned timeline component to show a series of data in a chronological order.

1 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML
javascript

        
            
      <ul
        data-te-stepper-init
        class="relative m-0 flex list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
        <!--First item-->
        <li
          data-te-stepper-step-ref
          data-te-stepper-step-active
          class="w-[4.5rem] flex-auto">
          <div
            data-te-stepper-head-ref
            class="flex cursor-pointer items-center pl-2 leading-[1.3rem] no-underline after:ml-2 after:h-px after:w-full after:flex-1 after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
            <span
              data-te-stepper-head-icon-ref
              class="my-6 mr-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
              1
            </span>
            <span
              data-te-stepper-head-text-ref
              class="font-medium text-neutral-500 after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
              step1
            </span>
          </div>
          <div
            data-te-stepper-content-ref
            class="absolute w-full p-4 transition-all duration-500 ease-in-out">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </li>

        <!--Second item-->
        <li data-te-stepper-step-ref class="w-[4.5rem] flex-auto">
          <div
            data-te-stepper-head-ref
            class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:mr-2 before:h-px before:w-full before:flex-1 before:bg-[#e0e0e0] before:content-[''] after:ml-2 after:h-px after:w-full after:flex-1 after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:before:bg-neutral-600 dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
            <span
              data-te-stepper-head-icon-ref
              class="my-6 mr-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
              2
            </span>
            <span
              data-te-stepper-head-text-ref
              class="text-neutral-500 after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
              step2
            </span>
          </div>
          <div
            data-te-stepper-content-ref
            class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </div>
        </li>

        <!--Third item-->
        <li data-te-stepper-step-ref class="w-[4.5rem] flex-auto">
          <div
            data-te-stepper-head-ref
            class="flex cursor-pointer items-center pr-2 leading-[1.3rem] no-underline before:mr-2 before:h-px before:w-full before:flex-1 before:bg-[#e0e0e0] before:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:before:bg-neutral-600 dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
            <span
              data-te-stepper-head-icon-ref
              class="my-6 mr-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
              3
            </span>
            <span
              data-te-stepper-head-text-ref
              class="text-neutral-500 after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
              step3
            </span>
          </div>
          <div
            data-te-stepper-content-ref
            class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
          </div>
        </li>
      </ul>

        
            
      // Initialization for ES Users
      import {
        Stepper,
        initTE,
      } from "tw-elements";
      
      initTE({ Stepper });

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Vertical stepper

Use timeline component to show a series of data entries with a date, title, and description with a vertical line with dots on the left or right side of the wrapper element.

1 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML
javascript

        
            
      <ul
        class="relative m-0 w-full list-none overflow-hidden p-0 transition-[height] duration-200 ease-in-out"
        data-te-stepper-init
        data-te-stepper-type="vertical">
        <!--First item-->
        <li
          data-te-stepper-step-ref
          class="relative h-fit after:absolute after:left-[2.45rem] after:top-[3.6rem] after:mt-px after:h-[calc(100%-2.45rem)] after:w-px after:bg-[#e0e0e0] after:content-[''] dark:after:bg-neutral-600">
          <div
            data-te-stepper-head-ref
            class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
            <span
              data-te-stepper-head-icon-ref
              class="mr-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
              1
            </span>
            <span
              data-te-stepper-head-text-ref
              class="text-neutral-500 after:absolute after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
              step1
            </span>
          </div>
          <div
            data-te-stepper-content-ref
            class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pl-[3.75rem] pr-6 duration-300 ease-in-out">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </li>

        <!--Second item-->
        <li
          data-te-stepper-step-ref
          class="relative h-fit after:absolute after:left-[2.45rem] after:top-[3.6rem] after:mt-px after:h-[calc(100%-2.45rem)] after:w-px after:bg-[#e0e0e0] after:content-[''] dark:after:bg-neutral-600">
          <div
            data-te-stepper-head-ref
            class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
            <span
              data-te-stepper-head-icon-ref
              class="mr-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
              2
            </span>
            <span
              data-te-stepper-head-text-ref
              class="text-neutral-500 after:absolute after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
              step2
            </span>
          </div>
          <div
            data-te-stepper-content-ref
            class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pl-[3.75rem] pr-6 duration-300 ease-in-out">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </div>
        </li>

        <!--Third item-->
        <li data-te-stepper-step-ref class="relative h-fit">
          <div
            data-te-stepper-head-ref
            class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
            <span
              data-te-stepper-head-icon-ref
              class="mr-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
              3
            </span>
            <span
              data-te-stepper-head-text-ref
              class="text-neutral-500 after:absolute after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
              step3
            </span>
          </div>
          <div
            data-te-stepper-content-ref
            class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pl-[3.75rem] pr-6 duration-300 ease-in-out">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
          </div>
        </li>
      </ul>

        
            
      // Initialization for ES Users
      import {
        Stepper,
        initTE,
      } from "tw-elements";
      
      initTE({ Stepper });

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Stepper, initTE } from "tw-elements";
        initTE({ Stepper });

        
            
        import "tw-elements";

Usage

Via data attributes

Elements with the data-te-stepper-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTE method.

HTML

        
            
        <ul
          data-te-stepper-init
          id="stepper"
          class="relative m-0 flex w-3/4 list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
          ...
        </ul>

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the Stepper class - it allows making use of all the public methods listed in the Methods section.

javascript
umd

ES UMD

        
            
              const stepper = new Stepper(document.getElementById('stepper'));

        
            
              const stepper = new te.Stepper(document.getElementById('stepper'));

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-stepper-type="vertical".

Name	Type	Default	Description
`stepperAnimationDuration`	number	`800`	Set the animation duration in milliseconds. Should be the same as the duration provided by animation classes.
`stepperType`	string	`'horizontal'`	Set stepper view.
`stepperLinear`	boolean	`false`	Set to `true` to use the linear stepper.
`stepperNoEditable`	boolean	`false`	Set to `true` to block editing of the completed step.
`slideInLeftAnimation`	string	`animate-[slide-in-left_0.8s_both]`	Sets the animation class for the slide in left animation.
`slideOutLeftAnimation`	string	`animate-[slide-out-left_0.8s_both]`	Sets the animation class for the slide out left animation.
`slideInRightAnimation`	string	`animate-[slide-in-right_0.8s_both]`	Sets the animation class for the slide in right animation.
`slideOutRightAnimation`	string	`animate-[slide-out-right_0.8s_both]`	Sets the animation class for the slide out right animation.

Methods

Method	Description	Example
`changeStep`	Switch to the step given as the parameter.	`Stepper.changeStep()`
`getInstance`	Static method which allows you to get the stepper instance associated to a DOM element.	`Stepper.getInstance(myStepperEl)`
`getOrCreateInstance`	Static method which returns the stepper instance associated to a DOM element or create a new one in case it wasn't initialized.	`Stepper.getOrCreateInstance(myStepperEl)`
`nextStep`	Switch to the next step.	`stepper.nextStep()`
`previousStep`	Switch to the previous step.	`stepper.previousStep()`

javascript
umd

ES UMD

        
            
            const myStepperEl = document.getElementById('stepper');
            const stepper = new Stepper(myStepperEl);
            stepper.nextStep();

        
            
            const myStepperEl = document.getElementById('stepper');
            const stepper = new te.Stepper(myStepperEl);
            stepper.nextStep();

Stepper

Basic example

Vertical stepper

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Stepper - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods