Stepper 

Ripple UI comes with a Stepper component that shows the progress of a task through numbered steps.

Default 

Simple example of Stepper.

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

HTML
JSX
<ol class="steps">
	<li class="step overflow-hidden">
		<div class="step-circle">1</div>
		<h3>Done</h3>
	</li>
	<li class="step overflow-hidden">
		<div class="step-circle">2</div>
		<h3>In progress</h3>
	</li>
	<li class="step overflow-hidden">
		<div class="step-circle">3</div>
		<h3>Waiting</h3>
	</li>
</ol>

Vertical Orientation 

Stepper can be displayed vertically.

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

HTML
JSX
<ol class="steps">
	<li class="step">
		<div class="step-circle">1</div>
		<h3>Done</h3>
	</li>
	<li class="step">
		<div class="step-circle">2</div>
		<h3>In progress</h3>
	</li>
	<li class="step">
		<div class="step-circle">3</div>
		<h3>Waiting</h3>
	</li>
</ol>

With active states 

Stepper can be displayed with active states.

  1. step-done: The step is completed.
  2. step-active: The step is currently active.
  3. withou any class: The step is waiting and be as gray color.
  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

HTML
JSX
<ol class="steps">
	<li class="step step-primary step-done overflow-hidden">
		<div class="step-circle">1</div>
		<h3>Done</h3>
	</li>
	<li class="step step-primary step-done overflow-hidden">
		<div class="step-circle">2</div>
		<h3>In progress</h3>
	</li>
	<li class="step step-primary step-active overflow-hidden">
		<div class="step-circle">3</div>
		<h3>Waiting</h3>
	</li>
</ol>

Colors 

Stepper can be displayed with different colors.

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

HTML
JSX
<div class="flex flex-col gap-2">
	<ol class="steps">
		<li class="step step-primary step-done overflow-hidden">
			<div class="step-circle">1</div>
			<h3>Done</h3>
		</li>
		<li class="step step-primary step-done overflow-hidden">
			<div class="step-circle">2</div>
			<h3>In progress</h3>
		</li>
		<li class="step step-primary step-done overflow-hidden">
			<div class="step-circle">3</div>
			<h3>Waiting</h3>
		</li>
	</ol>


	<ol class="steps">
		<li class="step step-secondary step-done overflow-hidden">
			<div class="step-circle">1</div>
			<h3>Done</h3>
		</li>
		<li class="step step-secondary step-done overflow-hidden">
			<div class="step-circle">2</div>
			<h3>In progress</h3>
		</li>
		<li class="step step-secondary step-done overflow-hidden">
			<div class="step-circle">3</div>
			<h3>Waiting</h3>
		</li>
	</ol>


	<ol class="steps">
		<li class="step step-success step-done overflow-hidden">
			<div class="step-circle">1</div>
			<h3>Done</h3>
		</li>
		<li class="step step-success step-done overflow-hidden">
			<div class="step-circle">2</div>
			<h3>In progress</h3>
		</li>
		<li class="step step-success step-done overflow-hidden">
			<div class="step-circle">3</div>
			<h3>Waiting</h3>
		</li>
	</ol>


	<ol class="steps">
		<li class="step step-error step-done overflow-hidden">
			<div class="step-circle">1</div>
			<h3>Done</h3>
		</li>
		<li class="step step-error step-done overflow-hidden">
			<div class="step-circle">2</div>
			<h3>In progress</h3>
		</li>
		<li class="step step-error step-done overflow-hidden">
			<div class="step-circle">3</div>
			<h3>Waiting</h3>
		</li>
	</ol>


	<ol class="steps">
		<li class="step step-warning step-done overflow-hidden">
			<div class="step-circle">1</div>
			<h3>Done</h3>
		</li>
		<li class="step step-warning step-done overflow-hidden">
			<div class="step-circle">2</div>
			<h3>In progress</h3>
		</li>
		<li class="step step-warning step-done overflow-hidden">
			<div class="step-circle">3</div>
			<h3>Waiting</h3>
		</li>
	</ol>
</div>

With icons 

Stepper with icons.

  1. Done

  2. In progress

  3. Waiting

HTML
JSX
<ol class="steps">
	<li class="step step-primary step-done overflow-hidden">
		<div class="step-circle">
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49987 13.475L4.6082 10.5833C4.2832 10.2583 3.7582 10.2583 3.4332 10.5833C3.1082 10.9083 3.1082 11.4333 3.4332 11.7583L6.91654 15.2416C7.24154 15.5666 7.76654 15.5666 8.09154 15.2416L16.9082 6.42498C17.2332 6.09998 17.2332 5.57498 16.9082 5.24998C16.5832 4.92498 16.0582 4.92498 15.7332 5.24998L7.49987 13.475Z" class="fill-primary" />
			</svg>
		</div>
		<h3>Done</h3>
	</li>
	<li class="step step-primary step-done overflow-hidden">
		<div class="step-circle">
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49987 13.475L4.6082 10.5833C4.2832 10.2583 3.7582 10.2583 3.4332 10.5833C3.1082 10.9083 3.1082 11.4333 3.4332 11.7583L6.91654 15.2416C7.24154 15.5666 7.76654 15.5666 8.09154 15.2416L16.9082 6.42498C17.2332 6.09998 17.2332 5.57498 16.9082 5.24998C16.5832 4.92498 16.0582 4.92498 15.7332 5.24998L7.49987 13.475Z" class="fill-primary" />
			</svg>
		</div>
		<h3>In progress</h3>
	</li>
	<li class="step step-primary step-done overflow-hidden">
		<div class="step-circle">
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49987 13.475L4.6082 10.5833C4.2832 10.2583 3.7582 10.2583 3.4332 10.5833C3.1082 10.9083 3.1082 11.4333 3.4332 11.7583L6.91654 15.2416C7.24154 15.5666 7.76654 15.5666 8.09154 15.2416L16.9082 6.42498C17.2332 6.09998 17.2332 5.57498 16.9082 5.24998C16.5832 4.92498 16.0582 4.92498 15.7332 5.24998L7.49987 13.475Z" class="fill-primary" />
			</svg>
		</div>
		<h3>Waiting</h3>
	</li>
</ol>

Scrollable 

Stepper can be scrollable if you have alot of steps.

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

  4. 4

    Waiting

  5. 5

    Waiting

  6. 6

    Waiting

HTML
JSX
<ol class="steps overflow-auto max-w-sm">
	<li class="step">
		<div class="step-circle">1</div>
		<h3>Done</h3>
	</li>
	<li class="step">
		<div class="step-circle">2</div>
		<h3>In progress</h3>
	</li>
	<li class="step">
		<div class="step-circle">3</div>
		<h3>Waiting</h3>
	</li>
	<li class="step">
		<div class="step-circle">4</div>
		<h3>Waiting</h3>
	</li>
	<li class="step">
		<div class="step-circle">5</div>
		<h3>Waiting</h3>
	</li>
	<li class="step">
		<div class="step-circle">6</div>
		<h3>Waiting</h3>
	</li>
</ol>

Responsive 

Stepper responsive.

  1. 1

    Done

  2. 2

    In progress

  3. 3

    Waiting

HTML
JSX
<ol class="steps steps-vertical lg:steps-horizontal">
	<li class="step">
		<div class="step-circle">1</div>
		<h3>Done</h3>
	</li>
	<li class="step">
		<div class="step-circle">2</div>
		<h3>In progress</h3>
	</li>
	<li class="step">
		<div class="step-circle">3</div>
		<h3>Waiting</h3>
	</li>
</ol>

API 

classDescription
stepssteps clase base
steps-verticalsteps in vertical orientation
steps-horizontalsteps in horizontal orientation
stepstep clase base
step-primarystep primary color
step-secondarystep secondary color
step-successstep success color
step-errorstep error color
step-warningstep warning color
step-circlestep circle
step-donethe step is completed
step-activethe step is currently active
SwitchTabs
Edit this page on GitHub