Dexo - Premium Admin Template

Steps

You can set steps for process using .steps & .step class.

Register
Choose plan
Purchase
Received

  <div class="flex items-center flex-wrap gap-2 w-full">
   <ul class="steps w-full">
       <li class="step step-primary !min-w-[7rem] first:before:hidden"> Register </li>
       <li class="step step-primary !min-w-[7rem]"> Choose plan </li>
       <li class="step !min-w-[7rem]"> Purchase </li>
       <li class="step !min-w-[7rem]"> Received </li>
   </ul> 
</div>

Responsive Steps

You can set responsive steps for process using .responsive-vertical class.

Register
Choose plan
Purchase
Received

  <div class="flex items-center flex-wrap gap-2 w-full">
   <ul class="steps w-full 2md:responsive-vertical">
       <li class="step step-primary !min-w-[7rem] first:before:hidden"> Register </li>
       <li class="step step-primary !min-w-[7rem]"> Choose plan </li>
       <li class="step !min-w-[7rem]"> Purchase </li>
       <li class="step !min-w-[7rem]"> Received </li>
  </ul> 
</div>

Colored Steps

You can set colored steps for process using .step-secondary .step-(primary, info, success, warning, danger, light) class.

Register
Choose plan
Purchase
Received

  <div class="flex items-center flex-wrap gap-2 w-full">
   <ul class="steps w-full">
       <li class="step step-secondary !min-w-[7rem] first:before:hidden"> Register </li>
       <li class="step step-secondary !min-w-[7rem]"> Choose plan </li>
       <li class="step !min-w-[7rem]"> Purchase </li>
       <li class="step !min-w-[7rem]"> Received </li>
  </ul> 
</div>

Multi Colored

You can set colored steps for process using .step-(primary, info, success, warning, danger, light) class.

start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
end

  <div class="flex items-center flex-wrap gap-2 w-full">
    <ul class="steps custom-scroll overflow-x-auto">
        <li class="step">start</li>
        <li class="step step-info">2</li>
        <li class="step step-info">3</li>
        <li class="step step-info">4</li>
        <li class="step">5</li>
        <li class="step">6</li>
        <li class="step">7</li>
        <li class="step">8</li>
        <li class="step step-success">9</li>
        <li class="step step-success">10</li>
        <li class="step">11</li>
        <li class="step">12</li>
        <li class="step step-warning">13</li>
        <li class="step step-warning">14</li>
        <li class="step">15</li>
        <li class="step">16</li>
        <li class="step step-primary">17</li>
        <li class="step step-primary">18</li>
        <li class="step">19</li>
        <li class="step">20</li>
        <li class="step step-danger">21</li>
        <li class="step step-danger">22</li>
        <li class="step step-danger">23</li>
        <li class="step step-danger">end</li> 
    </ul> 
</div>

Hand crafted & made with

Customizer