Segmented Stepper — Tailwind Component

What it does

Capabilities

Completed/current/upcoming states
Connecting progress line
Checkmark on completed steps
Interactive next/back
Data-stepper-step driven
Aria-hidden on decorative icons

Preview

Live component

Interactive preview

Open preview

9:41 100%

devsnips.site/library/tailwind/components/progress/segmented-stepper/

fluid · no fixed width 100%

No dependencies Focus-visible

Install

Add to your project

terminal

npx devsnips add Tailwind/Components/Progress/segmented-stepper

registry path: Tailwind/Components/Progress/segmented-stepper

Source

Implementation

code.html

<!--
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>

# 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`

39 lines UTF-8 · LF · Spaces: 2

DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/progress/segmented-stepper

Prompt instruction

I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/progress/segmented-stepper/

Install: npx devsnips add
Tailwind/Components/Progress/segmented-stepper

This is the Segmented Stepper — Horizontal multi-step progress stepper for checkouts and wizards. Each step shows completed (checkmark, filled), current (number, outlined), or upcoming (muted) state, with a connecting progress line that fills as steps complete.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI