steps vertical process stepper timeline progress steps vertical stepper timeline progress checkmark completed vertical process steps with progress step indicator with completed and current states
Steps Vertical
Fetch pattern JSON:
curl https://webspire.de/patterns/steps/vertical.json vertical.html
<section class="ws-steps bg-[var(--ws-steps-bg)] py-20">
<div class="mx-auto max-w-2xl px-6">
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">Getting started</h2>
<p class="mt-3 text-lg text-[var(--ws-steps-text-soft)]">Follow these steps to set up your account.</p>
</div>
<div class="mt-16">
<div class="relative space-y-10 pl-14">
<!-- Vertical connector line -->
<div class="absolute bottom-4 left-[19px] top-0 w-0.5 bg-[var(--ws-steps-line)]" aria-hidden="true"></div>
<!-- Step 1: Completed -->
<div class="relative">
<div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-[var(--ws-steps-accent-text)]">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Create account</h3>
<p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Sign up in seconds with your email or social account. No credit card required.</p>
</div>
<!-- Step 2: Completed -->
<div class="relative">
<div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-[var(--ws-steps-accent-text)]">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Configure project</h3>
<p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Set up your workspace, choose your preferences, and invite team members.</p>
</div>
<!-- Step 3: Current -->
<div class="relative">
<div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] bg-[var(--ws-steps-bg)] text-sm font-bold text-[var(--ws-steps-accent)] ring-4 ring-indigo-100">3</div>
<h3 class="text-base font-semibold text-[var(--ws-steps-accent)]">Import data</h3>
<p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Connect your existing tools or upload data directly from CSV or API.</p>
</div>
<!-- Step 4: Future -->
<div class="relative">
<div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] text-sm font-bold text-[var(--ws-steps-text-soft)]">4</div>
<h3 class="text-base font-semibold text-[var(--ws-steps-text-soft)]">Go live</h3>
<p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Launch your project and start tracking results in real time.</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
stepsverticalprocesssteppertimelineprogress
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and optional subtitle. |
| steps | Yes | Vertical list of step items with circle, title, and description. |
Vertical 4-step indicator with a connecting line between numbered circles. Completed steps show a filled circle with a checkmark, the current step has an accent-colored ring, and future steps are muted gray. Each step includes a title and description to the right of the circle. Ideal for onboarding flows, setup wizards, or checkout progress.