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.

  1. completed
  2. 2
  3. 3
  4. 4
<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.

  1. completed
  2. 2
  3. 3
  4. 4
<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.

  1. completed
  2. 2
  3. 3
  4. 4
<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);
}