Segmented Stepper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!--
Snippet Name: Segmented Stepper
Description: Horizontal multi-step progress stepper for checkouts and wizards. Steps show completed (check), current (number), and upcoming (muted) states with a connecting progress line.
Author: DevSnips Contributors
Usage Example: Drop into a multi-step form. Add data-stepper-step="n" to the container and the script highlights step n.
-->
<ol class="flex items-center" data-stepper="3" data-stepper-step="2">
  <!-- Step 1 (completed) -->
  <li class="flex items-center pr-4 sm:pr-8" data-stepper-item="1">
    <div class="flex items-center gap-3">
      <span class="stepper-marker flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 bg-blue-600 text-white transition-colors">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
      </span>
      <span class="stepper-label hidden text-sm font-medium text-gray-900 sm:block">Cart</span>
    </div>
    <div class="stepper-line ml-4 h-0.5 w-10 bg-blue-600 sm:w-20"></div>
  </li>

  <!-- Step 2 (current) -->
  <li class="flex items-center pr-4 sm:pr-8" data-stepper-item="2">
    <div class="flex items-center gap-3">
      <span class="stepper-marker flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 bg-white text-blue-600 transition-colors">
        <span class="stepper-num text-sm font-semibold">2</span>
      </span>
      <span class="stepper-label hidden text-sm font-medium text-gray-900 sm:block">Shipping</span>
    </div>
    <div class="stepper-line ml-4 h-0.5 w-10 bg-gray-200 sm:w-20"></div>
  </li>

  <!-- Step 3 (upcoming) -->
  <li class="flex items-center" data-stepper-item="3">
    <div class="flex items-center gap-3">
      <span class="stepper-marker flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 bg-white text-gray-400 transition-colors">
        <span class="stepper-num text-sm font-semibold">3</span>
      </span>
      <span class="stepper-label hidden text-sm font-medium text-gray-400 sm:block">Payment</span>
    </div>
  </li>
</ol>

1
2
3
4
5
6
7
8
9
10
11
12

# Segmented Stepper

Segmented step progress indicator.

## Usage
```bash
npx devsnips add Tailwind/Components/Progress/segmented-stepper
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`