Step-by-step guidance through a task.
Step 2 of 4
<div class="wt wt--vertical" style="--accent:#D9C8F0;">
<h3 class="wt__title">Set up your first project</h3>
<p class="wt__progress">Step 2 of 4</p>
<ol class="wt__list">
<li class="wt__step"><span class="wt__num">1</span><span class="wt__label">Create an account</span></li>
<li class="wt__step"><span class="wt__num">2</span><span class="wt__label">Import your data</span></li>
<li class="wt__step"><span class="wt__num">3</span><span class="wt__label">Invite your team</span></li>
<li class="wt__step"><span class="wt__num">4</span><span class="wt__label">Launch your first workflow</span></li>
</ol>
</div>
<style>
.wt { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; max-width: 420px; border-radius: 14px; border: 1px solid #24143018; }
.wt__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.wt__progress { margin: 0 0 14px; font-size: 12px; color: #24143090; }
.wt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wt__step { display: flex; align-items: center; gap: 12px; padding: 8px 0; position: relative; opacity: .5; }
.wt__step:nth-child(-n+2) { opacity: 1; }
.wt__num { width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid #24143035; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.wt__step:nth-child(-n+2) .wt__num { background: var(--accent); border-color: var(--accent); color: #241430; }
.wt__step:nth-child(2) .wt__num { box-shadow: 0 0 0 3px var(--accent); }
.wt__label { font-size: 13.5px; font-weight: 600; }
.wt--vertical .wt__step:not(:last-child)::after { content: ""; position: absolute; left: 11.5px; top: 32px; width: 1.5px; height: calc(100% - 8px); background: #24143020; }
.wt--horizontal .wt__list { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.wt--horizontal .wt__step { padding: 0; }
.wt--cards .wt__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.wt--cards .wt__step { flex: 1 1 160px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1.5px solid #24143018; border-radius: 10px; }
</style><div class="wt-tw wt-tw--vertical max-w-md p-5 rounded-2xl border border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans" style="--accent:#D9C8F0">
<h3 class="m-0 mb-1 text-base font-bold">Set up your first project</h3>
<p class="m-0 mb-3.5 text-xs text-[#24143090]">Step 2 of 4</p>
<ol class="wt-tw__list list-none m-0 p-0 flex flex-col">
<li class="wt-tw__step flex items-center gap-3 py-2"><span class="wt-tw__num w-6 h-6 rounded-full border-[1.5px] border-[#24143035] flex items-center justify-center text-xs font-bold shrink-0">1</span><span class="text-[13.5px] font-semibold">Create an account</span></li>
<li class="wt-tw__step flex items-center gap-3 py-2"><span class="wt-tw__num w-6 h-6 rounded-full border-[1.5px] border-[#24143035] flex items-center justify-center text-xs font-bold shrink-0">2</span><span class="text-[13.5px] font-semibold">Import your data</span></li>
<li class="wt-tw__step flex items-center gap-3 py-2"><span class="wt-tw__num w-6 h-6 rounded-full border-[1.5px] border-[#24143035] flex items-center justify-center text-xs font-bold shrink-0">3</span><span class="text-[13.5px] font-semibold">Invite your team</span></li>
<li class="wt-tw__step flex items-center gap-3 py-2"><span class="wt-tw__num w-6 h-6 rounded-full border-[1.5px] border-[#24143035] flex items-center justify-center text-xs font-bold shrink-0">4</span><span class="text-[13.5px] font-semibold">Launch your first workflow</span></li>
</ol>
</div>
<style>
.wt-tw__step { opacity: .5; }
.wt-tw__step:nth-child(-n+2) { opacity: 1; }
.wt-tw__step:nth-child(-n+2) .wt-tw__num { background: var(--accent); border-color: var(--accent); }
.wt-tw--horizontal .wt-tw__list { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.wt-tw--cards .wt-tw__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.wt-tw--cards .wt-tw__step { flex: 1 1 150px; flex-direction: column; align-items: flex-start; padding: 12px; border: 1.5px solid #24143018; border-radius: 10px; }
</style>export function Walkthrough({
title = "Set up your first project",
currentStep = 2,
totalSteps = 4,
accent = "#D9C8F0",
orientation = "vertical",
}) {
const steps = ["Create an account", "Import your data", "Invite your team", "Launch your first workflow"];
const listStyle = {
vertical: { display: "flex", flexDirection: "column" },
horizontal: { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16 },
cards: { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 10 },
}[orientation] ?? {};
return (
<div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, maxWidth: 420, borderRadius: 14, border: "1px solid #24143018" }}>
<h3 style={{ margin: "0 0 4px", fontSize: 16, fontWeight: 700 }}>{title}</h3>
<p style={{ margin: "0 0 14px", fontSize: 12, color: "#24143090" }}>Step {currentStep} of {totalSteps}</p>
<ol style={{ listStyle: "none", margin: 0, padding: 0, ...listStyle }}>
{steps.map((label, i) => {
const done = i < currentStep;
const card = orientation === "cards";
return (
<li key={label} style={{
display: "flex", alignItems: card ? "flex-start" : "center", flexDirection: card ? "column" : "row",
gap: card ? 8 : 12, padding: card ? 12 : "8px 0", opacity: done ? 1 : 0.5,
border: card ? "1.5px solid #24143018" : "none", borderRadius: card ? 10 : 0,
flex: card ? "1 1 150px" : "initial",
}}>
<span style={{ width: 24, height: 24, borderRadius: 999, border: "1.5px solid " + (done ? accent : "#24143035"), background: done ? accent : "transparent", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700, flexShrink: 0 }}>{i + 1}</span>
<span style={{ fontSize: 13.5, fontWeight: 600 }}>{label}</span>
</li>
);
})}
</ol>
</div>
);
}