Components

Tailwind CSS Stepper Components - Madhuranjan UI

Explore a curated collection of stepper components built with Tailwind CSS. These interactive components guide users through multi-step processes with clear visual progress indicators, making them perfect for onboarding, checkout flows, and multi-step forms.

Our stepper components are designed to simplify complex workflows by breaking them into manageable steps. Each variant offers unique design elements and layouts—from simple three-step designs to advanced form-integrated steppers—ensuring a seamless and intuitive user experience across all devices.

Three Step Stepper

A simple three-step stepper to visually guide users through a sequential process.

1

Step 1

Account Setup

2

Step 2

Profile Information

3

Step 3

Confirmation

1<div class="mx-auto max-w-2xl p-6">
2      <div class="relative">
3        <div class="relative z-10 flex gap-5 justify-center items-center flex-wrap">
4          <div class="group flex flex-col items-center gap-4 md:flex-row md:items-start">
5            <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-blue-600 bg-blue-600 text-white transition-all duration-300 group-hover:scale-110 dark:border-blue-500 dark:bg-blue-500">
6              <span class="text-sm font-medium">1</span>
7            </div>
8            <div class="text-center md:text-left">
9              <p class="text-sm font-medium text-blue-600 dark:text-blue-400">
10                Step 1

Three Step Stepper with Line

An enhanced three-step stepper that uses connecting lines to clearly illustrate progress between steps.

1
Step One
2
Step Two
3
Step Three
1<div class="flex w-full justify-center px-4 py-6">
2  <div class="flex w-full max-w-3xl flex-col gap-4 sm:flex-row sm:items-center sm:gap-6">
3    <div class="flex items-center gap-2">
4      <div class="flex aspect-square w-8 items-center justify-center rounded-full bg-violet-100 font-semibold text-violet-600 ring-2 ring-violet-500 dark:bg-blue-900 dark:text-blue-300 dark:ring-blue-500">1</div>
5      <span class="text-sm text-gray-700 dark:text-gray-300">Step One</span>
6    </div>
7
8    <div class="hidden h-0.5 flex-1 bg-gray-300 sm:block dark:bg-gray-700"></div>
9
10    <div class="flex items-center gap-2">

Breadcrumb Stepper

A breadcrumb-style stepper that provides a clear, linear navigation path through multi-step processes.

1<div class="flex flex-wrap items-center justify-center bg-gray-50 dark:bg-gray-900">
2  <div class="mx-auto max-w-4xl p-1">
3    <!-- Breadcrumb Stepper -->
4    <nav class="">
5      <ol class="flex items-center gap-2 overflow-x-auto py-2 whitespace-nowrap">
6        <!-- Step 1 - Completed -->
7        <li class="flex items-center gap-2">
8          <a href="#" class="flex items-center gap-1 rounded-lg bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50">
9            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
10              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />

Vertical Stepper

A vertically aligned stepper ideal for longer forms or processes where vertical space is better utilized.

Step One

This step has been completed successfully.

Step Two (In Progress)

You’re currently working on this step.

Step Three

This step hasn’t been started yet.

1<div class="mx-auto w-full max-w-md px-4 py-6">
2  <div class="relative space-y-10 border-s-2 pl-5 border-gray-200 dark:border-gray-700">
3    <div class="relative pl-8">
4      <div class="absolute top-1 left-0 h-4 w-4 rounded-full bg-violet-500 ring-2 ring-white dark:bg-blue-500 dark:ring-gray-900"></div>
5      <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Step One</h3>
6      <p class="text-sm text-gray-500 dark:text-gray-400">This step has been completed successfully.</p>
7    </div>
8
9    <div class="relative pl-8">
10      <div class="absolute top-1 left-0 h-4 w-4 rounded-full bg-white ring-2 ring-violet-500 dark:bg-gray-900 dark:ring-blue-500"></div>

Advanced Stepper

An advanced stepper component featuring additional interactive elements and sophisticated styling for an enriched user experience.

  1. 1

    Product Onboarding Process

    Our onboarding process ensures you get the most out of our platform quickly and efficiently.

    • ✓ Initial Setup
    • ✓ Feature Tour
    • ✓ Data Import
    • ✓ Team Invitation
    • ✓ Customization
    • ✓ Training Session

    This structured approach ensures a smooth transition to our platform with minimal disruption.

  2. 2

    Data Migration Assistance

    We provide comprehensive support for transferring your existing data to our platform.

  3. 3

    Advanced Configuration

    Customize settings, integrations, and workflows to match your business processes perfectly.

1  <div class="mx-auto max-w-4xl p-4 sm:p-6">
2   <ol class="space-y-8 overflow-hidden">
3     <li class="relative flex-1 after:absolute after:-bottom-8 after:left-4 after:h-full after:w-0.5 after:bg-indigo-600 dark:after:bg-indigo-500 sm:after:left-5">
4      <div class="flex w-full items-start">
5        <span class="mr-3 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-medium text-white dark:bg-indigo-500 sm:h-9 sm:w-9">1</span>
6        <div class="block pt-0.5">
7          <h4 class="mb-2 text-base font-semibold text-indigo-600 dark:text-indigo-400">Product Onboarding Process</h4>
8          <p class="mb-4 max-w-md text-sm text-gray-600 dark:text-gray-300">
9            Our onboarding process ensures you get the most out of our platform quickly and efficiently.
10          </p>

Form Stepper

A form-integrated stepper designed to simplify multi-step form submissions while providing visual feedback on user progress.

  1. Completed

    Account

  2. Completed

    Email

  3. 3
    In Progress

    Profile

  4. 4
    Upcoming

    Preferences

  5. 5
    Upcoming

    Confirm

Profile Setup

3Step 3 of 5 - Almost there!
1<div class="mx-auto max-w-6xl p-4 sm:p-6">
2  <!-- Horizontal Stepper with Labels -->
3  <div class="relative">
4    <!-- Progress Line -->
5    <div class="absolute left-4 right-4 top-4 h-0.5 bg-gray-200 dark:bg-gray-700"></div>
6
7    <ol class="relative z-10 grid grid-cols-5">
8      <!-- Step 1 - Completed -->
9      <li class="flex flex-col items-center">
10        <div class="mb-2 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-white">
Color PickerBreadcrumbs