Steps
Tailwind CSS and Alpine JS Step
Steps are a great way to guide users through a process. They can be used to indicate the current step, the next step, and more.
Default steps
A simple step with numbers.
-
completed
-
2
-
3
-
4
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<ol class="" aria-label="registration progress">
<!-- completed step -->
<li class="">
<div class="" aria-label="create an account">
<span class="">
<svg class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
</svg>
<span class="">completed</span>
</span>
</div>
</li>
<!-- current step -->
<li class="" aria-current="step" aria-label="choose a plan">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">2</span>
</div>
</li>
<li class="" aria-label="checkout">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">3</span>
</div>
</li>
<li aria-label="start trial" class="">
<span aria-hidden="true" class=""></span>
<div class="">
<span class="">4</span>
</div>
</li>
</ol>
<ol class="" aria-label="registration progress">
<!-- completed step -->
<li class="">
<div class="" aria-label="create an account">
<span class="">
<svg class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
</svg>
<span class="">completed</span>
</span>
</div>
</li>
<!-- current step -->
<li class="" aria-current="step" aria-label="choose a plan">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">2</span>
</div>
</li>
<li class="" aria-label="checkout">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">3</span>
</div>
</li>
<li aria-label="start trial" class="">
<span aria-hidden="true" class=""></span>
<div class="">
<span class="">4</span>
</div>
</li>
</ol>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Steps with labels
A step with labels on each step.
-
completed
-
2
-
3
-
4
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<ol class="" aria-label="registration progress">
<!-- completed step -->
<li class="" aria-label="create an account">
<div class="">
<span class="">
<svg class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
</svg>
<span class="">completed</span>
</span>
<span class="">Create an account</span>
</div>
</li>
<!-- current step -->
<li class="" aria-current="step" aria-label="choose a plan">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">2</span>
<span class="">Select a plan</span>
</div>
</li>
<li class="" aria-label="checkout">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">3</span>
<span class="">Checkout</span>
</div>
</li>
<li class="" aria-label="start trial">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">4</span>
<span class="">Get started</span>
</div>
</li>
</ol>
<ol class="" aria-label="registration progress">
<!-- completed step -->
<li class="" aria-label="create an account">
<div class="">
<span class="">
<svg class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
</svg>
<span class="">completed</span>
</span>
<span class="">Create an account</span>
</div>
</li>
<!-- current step -->
<li class="" aria-current="step" aria-label="choose a plan">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">2</span>
<span class="">Select a plan</span>
</div>
</li>
<li class="" aria-label="checkout">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">3</span>
<span class="">Checkout</span>
</div>
</li>
<li class="" aria-label="start trial">
<span class="" aria-hidden="true"></span>
<div class="">
<span class="">4</span>
<span class="">Get started</span>
</div>
</li>
</ol>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Vertical steps
A vertical step with numbers and labels.
-
completed
-
2
-
3
-
4
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<ol class="" aria-label="registration progress">
<!-- completed step -->
<li class="" aria-label="create an account">
<div class="">
<span class="">
<svg class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
</svg>
<span class="">completed</span>
</span>
<span class="">Create an account</span>
</div>
</li>
<!-- current step -->
<li class="" aria-current="step" aria-label="choose a plan">
<div class="">
<div class="">
<div class=""></div>
<span class="">2</span>
</div>
<span class="">Select a plan</span>
</div>
</li>
<li class="" aria-label="checkout">
<div class="">
<div class="">
<div class=""></div>
<span class="">3</span>
</div>
<span class="">Checkout</span>
</div>
</li>
<li class="" aria-label="get started">
<div class="">
<div class="">
<div class=""></div>
<span class="">4</span>
</div>
<span class="">Get started</span>
</div>
</li>
</ol>
<ol class="" aria-label="registration progress">
<!-- completed step -->
<li class="" aria-label="create an account">
<div class="">
<span class="">
<svg class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
</svg>
<span class="">completed</span>
</span>
<span class="">Create an account</span>
</div>
</li>
<!-- current step -->
<li class="" aria-current="step" aria-label="choose a plan">
<div class="">
<div class="">
<div class=""></div>
<span class="">2</span>
</div>
<span class="">Select a plan</span>
</div>
</li>
<li class="" aria-label="checkout">
<div class="">
<div class="">
<div class=""></div>
<span class="">3</span>
</div>
<span class="">Checkout</span>
</div>
</li>
<li class="" aria-label="get started">
<div class="">
<div class="">
<div class=""></div>
<span class="">4</span>
</div>
<span class="">Get started</span>
</div>
</li>
</ol>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}