-
-
-
Notifications
Check all -
-
Edwin Day30 mins ago
Marked the bug analysis task as done
-
Ralph Waters45 mins ago
New bugs added for designer
-
-
-
-
-
Cart
Check all 
Mi Watch Revolve
$ 10.00
Ulrich Duffel Bag
$140.00
Tree Stylish Pot
$ 840.00
-
Total
$ 990.00
- Proceed to checkout
-
-
-
Messages
Send a new message -
online
-
warning
-
online
-
-
Helen Walter
Admin
Steps
ADMIN PANELSteps
Set steps for process using .steps & .step class.
- Register
- Choose plan
- Purchase
- Received
<div class="flex flex-wrap items-center w-full gap-2">
<ul class="w-full steps">
<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 flex-wrap items-center w-full gap-2">
<ul class="w-full steps 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 flex-wrap items-center w-full gap-2">
<ul class="w-full steps">
<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
- end
<div class="flex flex-wrap items-center w-full gap-2">
<ul class="overflow-x-auto steps custom-scroll">
<li class="step">start</li>
<li class="step step-info"></li>
<li class="step step-info"></li>
<li class="step step-info"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-success"></li>
<li class="step step-success"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-warning"></li>
<li class="step step-warning"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-primary"></li>
<li class="step step-primary"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-danger"></li>
<li class="step step-danger"></li>
<li class="step step-danger"></li>
<li class="step step-danger">end</li>
</ul>
</div>