Steps

Position

Use top bottom left right classes to control the position of steps.

Preview

Code

HTML

Code

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success top">
	<div class="step active">Register</div>
	<div class="step active">Choose plan</div>
	<div class="step">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps success top'>
  <div className='step active'>
    Register
  </div>
  <div className='step active'>
    Choose plan
  </div>
  <div className='step'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

Preview

Code

HTML

Code

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success bottom">
	<div class="step">Register</div>
	<div class="step active-point">Choose plan</div>
	<div class="step active">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps success bottom'>
  <div className='step'>
    Register
  </div>
  <div className='step active-point'>
    Choose plan
  </div>
  <div className='step active'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

Preview

Code

HTML

Code

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success left">
	<div class="step">Register</div>
	<div class="step">Choose plan</div>
	<div class="step active-point">Purchase</div>
	<div class="step active">Receive Product</div>
</div>

<div className='steps success left'>
  <div className='step'>
    Register
  </div>
  <div className='step'>
    Choose plan
  </div>
  <div className='step active-point'>
    Purchase
  </div>
  <div className='step active'>
    Receive Product
  </div>
</div>

Preview

Code

HTML

Code

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success right">
	<div class="step">Register</div>
	<div class="step active-point">Choose plan</div>
	<div class="step active">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps success right'>
  <div className='step'>
    Register
  </div>
  <div className='step active-point'>
    Choose plan
  </div>
  <div className='step active'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

Active waypoints

Use active active-point classes to control the activation of steps.

active: will activate bar and dot of steps.
active-point: will only activate dot part of the step.

Preview

Code

HTML

Code

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps danger bottom">
	<div class="step">Register</div>
	<div class="step active-point">Choose plan</div>
	<div class="step active">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps danger bottom'>
  <div className='step'>
    Register
  </div>
  <div className='step active-point'>
    Choose plan
  </div>
  <div className='step active'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

Shape

Use cornered square classes to control the shape of step's waypoint. Defaults to circle.

Preview

Code

HTML

Code

JSX/TSX

Choose plan

Purchase

Receive Product

Choose plan

Purchase

Receive Product

<div class="flex gap-4">
	<div class="steps success right">
		<div class="step square active">Register</div>
		<div class="step square active">Choose plan</div>
		<div class="step square">Purchase</div>
		<div class="step square">Receive Product</div>
	</div>
	<div class="steps danger left">
		<div class="step cornered active">Register</div>
		<div class="step cornered active">Choose plan</div>
		<div class="step cornered">Purchase</div>
		<div class="step cornered">Receive Product</div>
	</div>
</div>

<div className='flex gap-4'>
  <div className='steps success right'>
    <div className='step square active'>
      Register
    </div>
    <div className='step square active'>
      Choose plan
    </div>
    <div className='step square'>
      Purchase
    </div>
    <div className='step square'>
      Receive Product
    </div>
  </div>
  <div className='steps danger left'>
    <div className='step cornered active'>
      Register
    </div>
    <div className='step cornered active'>
      Choose plan
    </div>
    <div className='step cornered'>
      Purchase
    </div>
    <div className='step cornered'>
      Receive Product
    </div>
  </div>
</div>

Custom content

And you can customize the content of step's waypoint. Just add the data-content attribute on it.

Preview

Code

HTML

Code

JSX/TSX

Checked

Empty

Star

circle

emoji

<div class="steps success left">
	<div class="step active" data-content="✓">
		<p>Checked</p>
	</div>
	<div class="step active" data-content="">
		<p>Empty</p>
	</div>
	<div class="step" data-content="★">
		<p>Star</p>
	</div>
	<div class="step" data-content="●">
		<p>circle</p>
	</div>
	<div class="step" data-content="💪">
		<p>emoji</p>
	</div>
</div>

<div className='steps success left'>
  <div className='step active'
    data-content='✓'>
    <p>
      Checked
    </p>
  </div>
  <div className='step active'
    data-content=''>
    <p>
      Empty
    </p>
  </div>
  <div className='step'
    data-content='★'>
    <p>
      Star
    </p>
  </div>
  <div className='step'
    data-content='●'>
    <p>
      circle
    </p>
  </div>
  <div className='step'
    data-content='💪'>
    <p>
      emoji
    </p>
  </div>
</div>

Select Switch