Multi-step guided workflow.
Step 2 of 4
<section class="wiz" aria-label="Create project" style="--accent:#D9C8F0;">
<h3 class="wiz__title">Create project</h3>
<p class="wiz__progress">Step 2 of 4</p>
<ol class="wiz__steps wiz__steps--horizontal">
<li class="wiz__step is-complete"><span class="wiz__marker">✓</span><span class="wiz__label">Basics</span></li>
<li class="wiz__step is-current" aria-current="step"><span class="wiz__marker">2</span><span class="wiz__label">Team & permissions</span></li>
<li class="wiz__step"><span class="wiz__marker">3</span><span class="wiz__label">Design</span></li>
<li class="wiz__step"><span class="wiz__marker">4</span><span class="wiz__label">Review</span></li>
</ol>
<div class="wiz__actions">
<button type="button" class="wiz__back">Back</button>
<button type="button" class="wiz__next">Continue</button>
</div>
</section>
<style>
.wiz { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 380px; width: 380px; padding: 18px; border-radius: 14px; box-sizing: border-box; }
.wiz__title { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.wiz__progress { margin: 0 0 12px; font-size: 12px; color: #241430a0; }
.wiz__steps { display: flex; list-style: none; margin: 0 0 16px; padding: 0; gap: 16px; }
.wiz__steps--vertical { flex-direction: column; gap: 10px; }
.wiz__step { display: flex; align-items: center; gap: 6px; opacity: .5; }
.wiz__step.is-complete, .wiz__step.is-current { opacity: 1; }
.wiz__marker { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; font-size: 10px; flex: none; }
.wiz__step.is-complete .wiz__marker { background: var(--accent); border-color: var(--accent); color: #241430; }
.wiz__step.is-current .wiz__marker { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.wiz__step.is-current .wiz__label { font-weight: 700; }
.wiz__actions { display: flex; gap: 8px; }
.wiz__back { background: transparent; border: 1.5px solid #24143030; border-radius: 8px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.wiz__next { background: var(--accent); border: none; border-radius: 8px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; }
</style><section aria-label="Create project" class="wiz-tw font-sans text-[13.5px] text-[#241430] bg-[#FAF7F2] max-w-[380px] w-[380px] p-[18px] rounded-2xl box-border" style="--accent:#D9C8F0">
<h3 class="m-0 mb-0.5 text-base font-bold">Create project</h3>
<p class="m-0 mb-3 text-xs text-[#241430a0]">Step 2 of 4</p>
<ol class="wiz-tw__steps wiz-tw__steps--horizontal flex list-none m-0 mb-4 p-0 gap-4">
<li class="flex items-center gap-1.5">
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-bold" style="background:#D9C8F0;border:2px solid #D9C8F0;color:#241430">✓</span>
<span>Basics</span>
</li>
<li aria-current="step" class="flex items-center gap-1.5">
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full border-2 text-[10px] font-bold" style="border-color:#D9C8F0;color:#D9C8F0">2</span>
<span class="font-bold">Team & permissions</span>
</li>
<li class="flex items-center gap-1.5 opacity-50">
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full border-2 border-current text-[10px]">3</span>
<span>Design</span>
</li>
<li class="flex items-center gap-1.5 opacity-50">
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full border-2 border-current text-[10px]">4</span>
<span>Review</span>
</li>
</ol>
<div class="flex gap-2">
<button type="button" class="bg-transparent border-[1.5px] border-[#24143030] rounded-lg py-2 px-4 font-semibold cursor-pointer">Back</button>
<button type="button" class="rounded-lg py-2 px-4 font-bold border-0 cursor-pointer" style="background:#D9C8F0">Continue</button>
</div>
</section>
<style>
.wiz-tw__steps--vertical { flex-direction: column; gap: 10px; }
</style>export function Wizard({
title = "Create project",
currentLabel = "Team & permissions",
accent = "#D9C8F0",
showBack = true,
layout = "horizontal",
}) {
const marker = { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 20, height: 20, borderRadius: "50%", fontSize: 10, flex: "none" };
return (
<section aria-label={title} style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", background: "#FAF7F2", maxWidth: 380, width: 380, padding: 18, borderRadius: 14, boxSizing: "border-box" }}>
<h3 style={{ margin: "0 0 2px", fontSize: 16, fontWeight: 700 }}>{title}</h3>
<p style={{ margin: "0 0 12px", fontSize: 12, color: "#241430a0" }}>Step 2 of 4</p>
<ol style={{ display: "flex", flexDirection: layout === "vertical" ? "column" : "row", listStyle: "none", margin: "0 0 16px", padding: 0, gap: layout === "vertical" ? 10 : 16 }}>
<li style={{ display: "flex", alignItems: "center", gap: 6 }}>
<span style={{ ...marker, background: accent, border: "2px solid " + accent, color: "#241430" }}>✓</span>
<span>Basics</span>
</li>
<li aria-current="step" style={{ display: "flex", alignItems: "center", gap: 6 }}>
<span style={{ ...marker, border: "2px solid " + accent, color: accent, fontWeight: 700 }}>2</span>
<span style={{ fontWeight: 700 }}>{currentLabel}</span>
</li>
<li style={{ display: "flex", alignItems: "center", gap: 6, opacity: .5 }}>
<span style={{ ...marker, border: "2px solid currentColor" }}>3</span>
<span>Design</span>
</li>
<li style={{ display: "flex", alignItems: "center", gap: 6, opacity: .5 }}>
<span style={{ ...marker, border: "2px solid currentColor" }}>4</span>
<span>Review</span>
</li>
</ol>
<div style={{ display: "flex", gap: 8 }}>
{showBack && <button type="button" style={{ background: "transparent", border: "1.5px solid #24143030", borderRadius: 8, padding: "8px 16px", font: "inherit", fontWeight: 600, cursor: "pointer" }}>Back</button>}
<button type="button" style={{ background: accent, border: "none", borderRadius: 8, padding: "8px 16px", font: "inherit", fontWeight: 700, cursor: "pointer" }}>Continue</button>
</div>
</section>
);
}