Connect your stack step

Create a "connect your tools" onboarding step with Tailwind CSS. Centre a heading, a subline explaining that connections can be changed later, and a live counter reading "0 of 6 connected". Below, a responsive grid of integration cards, each carrying a data-tool attribute: a rounded tile with a monospaced glyph on a tinted square, the tool name, a one-line category, and a small bordered Connect button in the corner. Underneath the grid, a muted note about read-only scopes, then a footer with a "Skip for now" link and a Continue button that starts disabled and faded. Then add JavaScript that toggles each card between connected and not: swap the button to a green "Connected ✓" state and back, ring the connected card, keep a set of connected tools, update the counter, and enable the Continue button once at least one tool is connected while rewriting its label to name the count.

<div class="mx-auto max-w-3xl px-6 py-16">
  <div class="text-center">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Step 2 of 4</p>
    <h1 class="mt-3 text-2xl font-semibold text-neutral-900">Connect the tools you already use</h1>
    <p class="mx-auto mt-2 max-w-md text-sm text-neutral-500">We pull in repositories, incidents and deploy targets. Nothing is written back without asking.</p>
    <p id="connectedCount" class="mt-4 inline-block rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-600">0 of 6 connected</p>
  </div>

  <div class="mt-10 grid gap-4 sm:grid-cols-2">
    <div data-tool="github" class="flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 font-mono text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5v-9Z"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">GitHub</p>
        <p class="text-xs text-neutral-500">Source control</p>
      </div>
      <button data-connect class="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Connect</button>
    </div>

    <div data-tool="slack" class="flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 font-mono text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.3 2.47 3.45 5.47 3.45 9S14.3 18.53 12 21c-2.3-2.47-3.45-5.47-3.45-9S9.7 5.47 12 3Z"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">Slack</p>
        <p class="text-xs text-neutral-500">Alerts and deploy notices</p>
      </div>
      <button data-connect class="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Connect</button>
    </div>

    <div data-tool="linear" class="flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 font-mono text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 5c2.4-2.4 5.2-2.1 5.2-2.1s.3 2.8-2.1 5.2l-5.6 5.6-4.2-4.2L14 5Z"/><path d="m9 8-4.5.5L3 10l4 1m5 4 1 4 1.5-1.5.5-4.5M7 17c-1 1-3 1-3 1s0-2 1-3"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">Linear</p>
        <p class="text-xs text-neutral-500">Issues and releases</p>
      </div>
      <button data-connect class="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Connect</button>
    </div>

    <div data-tool="aws" class="flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 font-mono text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">AWS</p>
        <p class="text-xs text-neutral-500">Deploy targets</p>
      </div>
      <button data-connect class="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Connect</button>
    </div>

    <div data-tool="datadog" class="flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 font-mono text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M3 12h4l2.5-7 5 14 2.5-7h4"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">Datadog</p>
        <p class="text-xs text-neutral-500">Metrics and monitors</p>
      </div>
      <button data-connect class="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Connect</button>
    </div>

    <div data-tool="pagerduty" class="flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-100 font-mono text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">PagerDuty</p>
        <p class="text-xs text-neutral-500">On-call rotations</p>
      </div>
      <button data-connect class="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Connect</button>
    </div>
  </div>

  <p class="mt-6 text-center text-xs text-neutral-400">Every integration starts read-only. You approve write access the first time it is needed.</p>

  <div class="mt-8 flex items-center justify-between">
    <a href="#" class="text-sm text-neutral-500 hover:text-neutral-900">Skip for now</a>
    <button id="connectContinue" disabled class="cursor-not-allowed rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white opacity-40 transition hover:bg-neutral-800">Continue</button>
  </div>
</div>

var cards = [].slice.call(document.querySelectorAll("[data-tool]"));
var counter = document.getElementById("connectedCount");
var advance = document.getElementById("connectContinue");

var IDLE = "shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50";
var DONE = "shrink-0 rounded-lg border border-green-200 bg-green-50 px-3 py-1.5 text-xs font-medium text-green-700 transition";

var connected = [];

function sync() {
  counter.textContent = connected.length + " of " + cards.length + " connected";
  advance.disabled = connected.length === 0;
  advance.classList.toggle("opacity-40", advance.disabled);
  advance.classList.toggle("cursor-not-allowed", advance.disabled);
  advance.textContent = connected.length
    ? "Continue with " + connected.length + (connected.length === 1 ? " tool" : " tools")
    : "Continue";
}

cards.forEach(function (card) {
  var button = card.querySelector("[data-connect]");
  var tool = card.getAttribute("data-tool");

  button.addEventListener("click", function () {
    var index = connected.indexOf(tool);
    var on = index === -1;

    // Real flows open an OAuth window here and resolve on the callback.
    if (on) connected.push(tool);
    else connected.splice(index, 1);

    button.className = on ? DONE : IDLE;
    button.textContent = on ? "Connected ✓" : "Connect";
    card.classList.toggle("ring-2", on);
    card.classList.toggle("ring-neutral-900/10", on);
    card.classList.toggle("border-neutral-900", on);
    sync();
  });
});

sync();