Onboarding

Initial user setup journey.

html

<section class="ob" aria-label="Welcome to Basecamp" style="--accent:#A8E6C1;" data-stage="profile">
  <h2 class="ob__heading">Welcome to Basecamp</h2>
  <p class="ob__sub">Let&#39;s get your workspace ready.</p>
  <ol class="ob__steps">
    <li class="ob__step ob__step--profile">Set up profile</li>
    <li class="ob__step ob__step--team">Invite your team</li>
    <li class="ob__step ob__step--done">Start exploring</li>
  </ol>
  <div class="ob__actions">
    <button type="button" class="ob__primary">Continue</button>
    <button type="button" class="ob__skip">Skip for now</button>
  </div>
</section>
<style>
.ob { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 340px; width: 340px; padding: 20px; border-radius: 14px; box-sizing: border-box; }
.ob__heading { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.ob__sub { margin: 0 0 14px; color: #241430b3; }
.ob__steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ob__step { padding: 8px 10px; border-radius: 8px; background: #fff; }
.ob[data-stage="profile"] .ob__step--profile,
.ob[data-stage="team"] .ob__step--team,
.ob[data-stage="done"] .ob__step--done { background: var(--accent); font-weight: 700; }
.ob__actions { display: flex; gap: 10px; align-items: center; }
.ob__primary { background: #241430; color: #FAF7F2; border: none; border-radius: 8px; padding: 9px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.ob__primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob__skip { background: transparent; border: none; color: #241430a0; font: inherit; text-decoration: underline; cursor: pointer; }
</style>

tailwind

<section class="ob-tw font-sans text-[13.5px] text-[#241430] bg-[#FAF7F2] max-w-[340px] w-[340px] p-5 rounded-2xl box-border" aria-label="Welcome to Basecamp" style="--accent:#A8E6C1" data-stage="profile">
  <h2 class="m-0 mb-1.5 text-lg font-bold">Welcome to Basecamp</h2>
  <p class="m-0 mb-3.5 text-[#241430b3]">Let&#39;s get your workspace ready.</p>
  <ol class="list-none m-0 mb-4 p-0 flex flex-col gap-1.5">
    <li class="ob-tw__step ob-tw__step--profile py-2 px-2.5 rounded-lg bg-white">Set up profile</li>
    <li class="ob-tw__step ob-tw__step--team py-2 px-2.5 rounded-lg bg-white">Invite your team</li>
    <li class="ob-tw__step ob-tw__step--done py-2 px-2.5 rounded-lg bg-white">Start exploring</li>
  </ol>
  <div class="flex gap-2.5 items-center">
    <button type="button" class="bg-[#241430] text-[#FAF7F2] rounded-lg py-2 px-4.5 font-bold border-0 cursor-pointer">Continue</button>
    <button type="button" class="bg-transparent border-0 text-[#241430a0] underline cursor-pointer">Skip for now</button>
  </div>
</section>
<style>
.ob-tw[data-stage="profile"] .ob-tw__step--profile,
.ob-tw[data-stage="team"] .ob-tw__step--team,
.ob-tw[data-stage="done"] .ob-tw__step--done { background: #A8E6C1; font-weight: 700; }
</style>

react

export function Onboarding({
  heading = "Welcome to Basecamp",
  subheading = "Let's get your workspace ready.",
  stage = "profile",
  accent = "#A8E6C1",
  showSkip = true,
}) {
  const steps = [["profile", "Set up profile"], ["team", "Invite your team"], ["done", "Start exploring"]];
  return (
    <section aria-label={heading} style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", background: "#FAF7F2", maxWidth: 340, width: 340, padding: 20, borderRadius: 14, boxSizing: "border-box" }}>
      <h2 style={{ margin: "0 0 6px", fontSize: 18, fontWeight: 700 }}>{heading}</h2>
      <p style={{ margin: "0 0 14px", color: "#241430b3" }}>{subheading}</p>
      <ol style={{ listStyle: "none", margin: "0 0 16px", padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
        {steps.map(([id, label]) => (
          <li key={id} style={{ padding: "8px 10px", borderRadius: 8, background: stage === id ? accent : "#fff", fontWeight: stage === id ? 700 : 400 }}>{label}</li>
        ))}
      </ol>
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <button type="button" style={{ background: "#241430", color: "#FAF7F2", border: "none", borderRadius: 8, padding: "9px 18px", font: "inherit", fontWeight: 700, cursor: "pointer" }}>Continue</button>
        {showSkip && <button type="button" style={{ background: "transparent", border: "none", color: "#241430a0", font: "inherit", textDecoration: "underline", cursor: "pointer" }}>Skip for now</button>}
      </div>
    </section>
  );
}