We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out

Requires Material Tailwind JS

Tailwind CSS Stepper

Get started with our stepper components styled with Tailwind CSS. Perfect for creating multi-step forms, wizards, and progress indicators with smooth transitions and clear navigation.

Stepper Demo

Looking for a simple progress tracker? This example shows how to create clean step indicators using Tailwind CSS flex utilities, with proper spacing and active states.

1
2
3

Step 1 Content

This is the content for step 1. Add whatever content you need here.

1<div data-stepper-container data-initial-step="1" class="w-full">
2  <div class="flex w-full items-center justify-between">
3    <div aria-disabled="false" data-step class="group w-full flex items-center">
4      <div class="relative">
5        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
6          1
7        </span>
8      </div>
9      <div class="flex-1 h-1 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
10    </div>
11    <div aria-disabled="true" data-step class="group w-full flex items-center">
12      <div class="relative">
13        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
14          2
15        </span>
16      </div>
17      <div class="flex-1 h-1 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
18    </div>
19    <div aria-disabled="true" data-step class="group flex items-center">
20      <div class="relative">
21        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
22          3
23        </span>
24      </div>
25    </div>
26  </div>
27
28  <div class="mt-8">
29    <div data-step-content="1" class="step-content hidden">
30      <p class="text-xl font-semibold mb-4">Step 1 Content</p>
31      <p class="text-slate-500">This is the content for step 1. Add whatever content you need here.</p>
32    </div>
33    <div data-step-content="2" class="step-content">
34      <p class="text-xl font-semibold mb-4">Step 2 Content</p>
35      <p class="text-slate-500">This is the content for step 2. Add whatever content you need here.</p>
36    </div>
37    <div data-step-content="3" class="step-content hidden">
38      <p class="text-xl font-semibold mb-4">Step 3 Content</p>
39      <p class="text-slate-500">This is the content for step 3. Add whatever content you need here.</p>
40    </div>
41  </div>
42
43  <div class="mt-6 flex w-full justify-between gap-4"> 
44    <button 
45      data-stepper-prev 
46      class="inline-flex items-center justify-center border font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
47      Previous
48    </button>
49    <button 
50      data-stepper-next 
51      class="inline-flex items-center justify-center border font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
52      Next
53    </button>
54  </div>
55</div>
56

Stepper With Icon

Transform your step indicators with custom icons using Tailwind CSS grid utilities. Each step features an icon that visually represents its stage or action.

Step 1 Content

This is the content for step 1. Add whatever content you need here.

1<div data-stepper-container data-initial-step="1" class="w-full">
2  <div class="flex w-full items-center justify-between">
3    <div aria-disabled="false" data-step class="group w-full flex items-center">
4      <div class="relative">
5        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
6          <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-6 w-6">
7            <path d="M17 21H7C4.79086 21 3 19.2091 3 17V10.7076C3 9.30887 3.73061 8.01175 4.92679 7.28679L9.92679 4.25649C11.2011 3.48421 12.7989 3.48421 14.0732 4.25649L19.0732 7.28679C20.2694 8.01175 21 9.30887 21 10.7076V17C21 19.2091 19.2091 21 17 21Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
8            <path d="M9 17H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
9          </svg>
10        </span>
11      </div>
12      <div class="flex-1 h-1 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
13    </div>
14    <div aria-disabled="true" data-step class="group w-full flex items-center">
15      <div class="relative">
16        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
17          <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-6 w-6">
18            <path d="M7 18V17C7 14.2386 9.23858 12 12 12V12C14.7614 12 17 14.2386 17 17V18" stroke="currentColor" stroke-linecap="round"></path><path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
19            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5">
20            </circle>
21          </svg>
22        </span>
23      </div>
24      <div class="flex-1 h-1 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
25    </div>
26    <div aria-disabled="true" data-step class="group flex items-center">
27      <div class="relative">
28        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
29          <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-6 w-6">
30            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
31            <path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
32          </svg>
33        </span>
34      </div>
35    </div>
36  </div>
37
38  <div class="mt-8">
39    <div data-step-content="1" class="step-content hidden">
40      <p class="text-xl font-semibold mb-4">Step 1 Content</p>
41      <p class="text-slate-500">This is the content for step 1. Add whatever content you need here.</p>
42    </div>
43    <div data-step-content="2" class="step-content">
44      <p class="text-xl font-semibold mb-4">Step 2 Content</p>
45      <p class="text-slate-500">This is the content for step 2. Add whatever content you need here.</p>
46    </div>
47    <div data-step-content="3" class="step-content hidden">
48      <p class="text-xl font-semibold mb-4">Step 3 Content</p>
49      <p class="text-slate-500">This is the content for step 3. Add whatever content you need here.</p>
50    </div>
51  </div>
52
53  <div class="mt-6 flex w-full justify-between gap-4"> 
54    <button 
55      data-stepper-prev 
56      class="inline-flex items-center justify-center border align-middle font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
57      Previous
58    </button>
59    <button 
60      data-stepper-next 
61      class="inline-flex items-center justify-center border align-middle font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
62      Next
63    </button>
64  </div>
65</div>
66

Stepper With Dots

Need minimal step markers? This example uses Tailwind CSS sizing utilities to create compact dot indicators that show progress clearly.

Step 1 Content

This is the content for step 1. Add whatever content you need here.

1<div data-stepper-container data-initial-step="1" class="w-full">
2  <div class="flex w-full items-center">
3    <div aria-disabled="false" data-step class="group w-full flex items-center">
4      <div class="relative">
5        <span class="relative grid h-4 w-4 place-items-center rounded-full bg-slate-200  group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white"></span>
6      </div>
7      <div class="flex-1 h-0.5 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
8    </div>
9    <div aria-disabled="true" data-step class="group w-full flex items-center">
10      <div class="relative">
11        <span class="relative grid h-4 w-4 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white"></span>
12      </div>
13      <div class="flex-1 h-0.5 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
14    </div>
15    <div aria-disabled="true" data-step class="group flex items-center">
16      <div class="relative">
17        <span class="relative grid h-4 w-4 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white"></span>
18      </div>
19    </div>
20  </div>
21
22  <div class="mt-8">
23    <div data-step-content="1" class="step-content hidden">
24      <p class="text-xl font-semibold mb-4">Step 1 Content</p>
25      <p class="text-slate-500">This is the content for step 1. Add whatever content you need here.</p>
26    </div>
27    <div data-step-content="2" class="step-content">
28      <p class="text-xl font-semibold mb-4">Step 2 Content</p>
29      <p class="text-slate-500">This is the content for step 2. Add whatever content you need here.</p>
30    </div>
31    <div data-step-content="3" class="step-content hidden">
32      <p class="text-xl font-semibold mb-4">Step 3 Content</p>
33      <p class="text-slate-500">This is the content for step 3. Add whatever content you need here.</p>
34    </div>
35  </div>
36
37  <div class="mt-6 flex w-full justify-between gap-4"> 
38    <button 
39      data-stepper-prev 
40      class="inline-flex items-center justify-center border align-middle font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
41      Previous
42    </button>
43    <button 
44      data-stepper-next 
45      class="inline-flex items-center justify-center border align-middle font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
46      Next
47    </button>
48  </div>
49</div>
50

Stepper With Content

Use this example to create detailed step sections using Tailwind CSS typography utilities. Perfect for displaying step descriptions and form content in an organized layout.

Step 1
Step 2
Step 3

This is the content for step 1. Add whatever content you need here.

1<div data-stepper-container data-initial-step="1" class="w-full">
2  <div class="flex w-full items-center justify-between">
3    <div aria-disabled="false" data-step class="group w-full flex items-center">
4      <div class="relative">
5        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
6          <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-6 w-6">
7            <path d="M17 21H7C4.79086 21 3 19.2091 3 17V10.7076C3 9.30887 3.73061 8.01175 4.92679 7.28679L9.92679 4.25649C11.2011 3.48421 12.7989 3.48421 14.0732 4.25649L19.0732 7.28679C20.2694 8.01175 21 9.30887 21 10.7076V17C21 19.2091 19.2091 21 17 21Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
8            <path d="M9 17H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
9          </svg>
10        </span>
11        <span class="absolute -bottom-6 start-0 whitespace-nowrap text-slate-800 font-bold md:text-lg lg:text-xl top-12">Step 1</span>
12      </div>
13      <div class="flex-1 h-1 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
14    </div>
15    <div aria-disabled="true" data-step class="group w-full flex items-center">
16      <div class="relative">
17        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
18          <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-6 w-6">
19            <path d="M7 18V17C7 14.2386 9.23858 12 12 12V12C14.7614 12 17 14.2386 17 17V18" stroke="currentColor" stroke-linecap="round"></path><path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
20            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5">
21            </circle>
22          </svg>
23        </span>
24        <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-slate-800 font-bold md:text-lg lg:text-xl top-12">Step 2</span>
25      </div>
26      <div class="flex-1 h-1 bg-slate-200 group-data-[completed=true]:bg-slate-800"></div>
27    </div>
28    <div aria-disabled="true" data-step class="group flex items-center">
29      <div class="relative">
30        <span class="relative grid h-10 w-10 place-items-center rounded-full bg-slate-200 group-data-[active=true]:bg-slate-800 group-data-[active=true]:text-white group-data-[completed=true]:bg-slate-800 group-data-[completed=true]:text-white">
31          <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-6 w-6">
32            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
33            <path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
34          </svg>
35        </span>
36        <span class="absolute -bottom-6 end-0 whitespace-nowrap text-slate-800 font-bold md:text-lg lg:text-xl top-12">Step 3</span>
37      </div>
38    </div>
39  </div>
40
41  <div class="mt-12">
42    <div data-step-content="1" class="step-content hidden">
43      <p class="text-slate-500">This is the content for step 1. Add whatever content you need here.</p>
44    </div>
45    <div data-step-content="2" class="step-content">
46      <p class="text-slate-500">This is the content for step 2. Add whatever content you need here.</p>
47    </div>
48    <div data-step-content="3" class="step-content hidden">
49      <p class="text-slate-500">This is the content for step 3. Add whatever content you need here.</p>
50    </div>
51  </div>
52
53  <div class="mt-6 flex w-full justify-between gap-4"> 
54    <button 
55      data-stepper-prev 
56      class="inline-flex items-center justify-center border align-middle font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
57      Previous
58    </button>
59    <button 
60      data-stepper-next 
61      class="inline-flex items-center justify-center border align-middle font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
62      Next
63    </button>
64  </div>
65</div>
66

Stepper Custom Styles

Design unique step indicators using Tailwind CSS utilities. Add beautiful hover states, transitions, and color schemes while maintaining clear progression.

Step 1 Content

This is the content for step 1. Add whatever content you need here.

1<div data-stepper-container data-initial-step="1" class="w-full">
2  <div class="flex w-full items-center bg-slate-800 p-6 rounded-full">
3    <div aria-disabled="false" data-step class="group w-full flex items-center">
4      <div class="relative">
5        <span class="relative grid h-4 w-4 place-items-center rounded-full bg-slate-600 group-data-[active=true]:bg-slate-50 group-data-[active=true]:text-slate-800 group-data-[completed=true]:bg-slate-50 group-data-[completed=true]:text-slate-800"></span></div>
6      <div class="flex-1 h-0.5 bg-slate-600 group-data-[completed=true]:bg-slate-50"></div>
7    </div>
8    <div aria-disabled="true" data-step class="group w-full flex items-center">
9      <div class="relative">
10        <span class="relative grid h-4 w-4 place-items-center rounded-full bg-slate-600 group-data-[active=true]:bg-slate-50 group-data-[active=true]:text-slate-800 group-data-[completed=true]:bg-slate-50 group-data-[completed=true]:text-slate-800"></span>
11      </div>
12      <div class="flex-1 h-0.5 bg-slate-600 group-data-[completed=true]:bg-slate-50"></div>
13    </div>
14    <div aria-disabled="true" data-step class="group flex items-center">
15      <div class="relative">
16        <span class="relative grid h-4 w-4 place-items-center rounded-full bg-slate-600 group-data-[active=true]:bg-slate-50 group-data-[active=true]:text-slate-800 group-data-[completed=true]:bg-slate-50 group-data-[completed=true]:text-slate-800"></span>
17      </div>
18    </div>
19  </div>
20
21  <div class="mt-8">
22    <div data-step-content="1" class="step-content hidden">
23      <p class="text-xl font-semibold mb-4">Step 1 Content</p>
24      <p class="text-slate-500">This is the content for step 1. Add whatever content you need here.</p>
25    </div>
26    <div data-step-content="2" class="step-content">
27      <p class="text-xl font-semibold mb-4">Step 2 Content</p>
28      <p class="text-slate-500">This is the content for step 2. Add whatever content you need here.</p>
29    </div>
30    <div data-step-content="3" class="step-content hidden">
31      <p class="text-xl font-semibold mb-4">Step 3 Content</p>
32      <p class="text-slate-500">This is the content for step 3. Add whatever content you need here.</p>
33    </div>
34  </div>
35
36  <div class="mt-6 flex w-full justify-between gap-4"> 
37    <button 
38      data-stepper-prev 
39      class="inline-flex items-center justify-center border font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
40      Previous
41    </button>
42    <button 
43      data-stepper-next 
44      class="inline-flex items-center justify-center border font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
45      Next
46    </button>
47  </div>
48</div>
49

Required Script

Add these scripts to the bottom of your HTML:

1<script src="https://unpkg.com/@material-tailwind/html@3.0.0-beta.7/dist/material-tailwind.umd.min.js" defer></script>