Onboarding Checklist

Task list guiding initial setup.

html

<div class="ob ob--friendly" style="--accent:#A8E6C1;">
  <p class="ob__greeting">Welcome aboard — let&#39;s set up your workspace</p>
  <p class="ob__progress">2 of 4 steps complete</p>
  <ul class="ob__list">
    <li class="ob__item"><span class="ob__icon" aria-hidden="true"></span>Create your workspace</li>
    <li class="ob__item"><span class="ob__icon" aria-hidden="true"></span>Invite a teammate</li>
    <li class="ob__item"><span class="ob__icon" aria-hidden="true"></span>Connect your data</li>
    <li class="ob__item"><span class="ob__icon" aria-hidden="true"></span>Take a quick tour</li>
  </ul>
  
</div>
<style>
.ob { position: relative; font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 22px; max-width: 360px; border-radius: 16px; border: 1.5px solid #24143018; }
.ob__greeting { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.ob__greeting::before { content: "👋 "; }
.ob--minimal .ob__greeting::before { content: ""; }
.ob--celebratory .ob__greeting::before { content: "✨ "; }
.ob__progress { margin: 0 0 14px; font-size: 12.5px; color: #24143090; }
.ob__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob__item { display: flex; align-items: center; gap: 10px; font-size: 14px; opacity: .55; }
.ob__item:nth-child(-n+2) { opacity: 1; font-weight: 600; }
.ob__icon { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #24143035; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.ob__item:nth-child(-n+2) .ob__icon { background: var(--accent); border-color: var(--accent); }
.ob__item:nth-child(-n+2) .ob__icon::before { content: "✓"; color: #241430; }
.ob--celebratory { border-color: transparent; background: linear-gradient(135deg, #FAF7F2, #F5C2E020); }
.ob--minimal { border-style: dashed; }
.ob__banner { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent); font-size: 13px; font-weight: 600; text-align: center; }
</style>

tailwind

<div class="ob-tw ob-tw--friendly relative max-w-sm p-5.5 rounded-2xl border-[1.5px] border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans" style="--accent:#A8E6C1">
  <p class="ob-tw__greeting m-0 mb-1 font-bold text-[16px]">Welcome aboard — let&#39;s set up your workspace</p>
  <p class="m-0 mb-3.5 text-xs text-[#24143090]">2 of 4 steps complete</p>
  <ul class="ob-tw__list list-none m-0 p-0 flex flex-col gap-2.5">
    <li class="flex items-center gap-2.5 text-sm">Create your workspace</li>
    <li class="flex items-center gap-2.5 text-sm">Invite a teammate</li>
    <li class="flex items-center gap-2.5 text-sm">Connect your data</li>
    <li class="flex items-center gap-2.5 text-sm">Take a quick tour</li>
  </ul>
  
</div>
<style>
.ob-tw__list li { opacity: .55; }
.ob-tw__list li:nth-child(-n+2) { opacity: 1; font-weight: 600; }
.ob-tw--celebratory .ob-tw__greeting::before { content: "✨ "; }
.ob-tw--friendly .ob-tw__greeting::before { content: "👋 "; }
</style>

react

export function OnboardingChecklist({
  greeting = "Welcome aboard — let's set up your workspace",
  accent = "#A8E6C1",
  stepsDone = 2,
  tone = "friendly",
  allDone = false,
}) {
  const items = ["Create your workspace", "Invite a teammate", "Connect your data", "Take a quick tour"];
  const prefix = { friendly: "👋 ", minimal: "", celebratory: "✨ " }[tone] ?? "";
  const wrap = {
    friendly: {},
    minimal: { border: "1.5px dashed #24143035" },
    celebratory: { background: "linear-gradient(135deg, #FAF7F2, #F5C2E020)" },
  }[tone] ?? {};
  return (
    <div style={{ position: "relative", font: "16px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 22, maxWidth: 360, borderRadius: 16, border: "1.5px solid #24143018", ...wrap }}>
      <p style={{ margin: "0 0 4px", fontWeight: 700, fontSize: 16 }}>{prefix}{greeting}</p>
      <p style={{ margin: "0 0 14px", fontSize: 12.5, color: "#24143090" }}>{stepsDone} of 4 steps complete</p>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((label, i) => {
          const done = i < stepsDone;
          return (
            <li key={label} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, opacity: done ? 1 : 0.55, fontWeight: done ? 600 : 400 }}>
              <span aria-hidden="true" style={{ width: 20, height: 20, borderRadius: 999, border: "1.5px solid " + (done ? accent : "#24143035"), background: done ? accent : "transparent", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11 }}>{done ? "✓" : ""}</span>
              {label}
            </li>
          );
        })}
      </ul>
      {allDone && (
        <p style={{ margin: "16px 0 0", padding: "10px 12px", borderRadius: 10, background: accent, fontSize: 13, fontWeight: 600, textAlign: "center" }}>You're all set — nice work!</p>
      )}
    </div>
  );
}