Checklist

A stateful list of steps for onboarding flows, setup guides, or any multi-step process. Each item can be in one of three states — pending, current, or done — and an optional summary row shows overall progress.

Progress is driven by the --nano-checklist-progress CSS variable (e.g. style="--nano-checklist-progress: 40%") — set it server-side from Ruby, Hotwire, or any framework.

Onboarding checklist

2 of 4 complete

Connect Stripe Authorize access to your Stripe account.

Verify sending domain Add DNS records so emails send from your domain.

Pick an email template Choose a starter style and customize the copy. Choose template →

Go live Turn off test mode and start recovering failed payments.

<div class="nano-checklist">
  <div class="nano-checklist__summary">
    <span><span class="nano-checklist__count">2 of 4</span> complete</span>
    <span class="nano-checklist__bar" style="--nano-checklist-progress: 50%;">
      <span class="nano-checklist__bar-fill"></span>
    </span>
  </div>

  <div class="nano-checklist__item nano-checklist__item--done">
    <span class="nano-checklist__indicator"><svg>...</svg></span>
    <div class="nano-checklist__body">
      <span class="nano-checklist__title">Connect Stripe</span>
    </div>
  </div>

  <div class="nano-checklist__item nano-checklist__item--current">
    <span class="nano-checklist__indicator">3</span>
    <div class="nano-checklist__body">
      <span class="nano-checklist__title">Pick an email template</span>
      <a class="nano-checklist__action" href="#">Choose template →</a>
    </div>
  </div>
</div>

States

.nano-checklist__item — pending (default)
.nano-checklist__item--current — highlighted with primary color
.nano-checklist__item--done — muted, with success border and checkmark

Elements

.nano-checklist__summary — optional progress row (count + bar)
.nano-checklist__count — “X of Y” or similar
.nano-checklist__bar + .nano-checklist__bar-fill — progress visualization (set --nano-checklist-progress inline)
.nano-checklist__indicator — numeric step or checkmark svg
.nano-checklist__title / .nano-checklist__description — step content
.nano-checklist__action — optional CTA link for the current step