Skip to content

Blocked Step State

A copy-paste steppers & wizards component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Steppers & WizardsHTMLCSSany framework
  1. Account
  2. !Verify IDUpload failed — retry to continue
  3. 3Fund account

Copy into your project

HTML
<ol class="nuda-st2-blocked-step">
  <li class="is-done">
    <span class="nuda-st2-blocked-step__dot">✓</span>
    <span>Account</span>
  </li>
  <li class="is-error" aria-current="step">
    <span class="nuda-st2-blocked-step__dot">!</span>
    <span>Verify ID<em>Upload failed — retry to continue</em></span>
  </li>
  <li class="is-blocked" aria-disabled="true">
    <span class="nuda-st2-blocked-step__dot">3</span>
    <span>Fund account</span>
  </li>
</ol>
CSS
.nuda-st2-blocked-step {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nuda-st2-blocked-step li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  color: #a0a0a8;
}

.nuda-st2-blocked-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #a0a0a8;
  font-size: 11px;
  font-weight: 700;
}

.nuda-st2-blocked-step li.is-done .nuda-st2-blocked-step__dot {
  background: #e4ff54;
  border-color: #e4ff54;
  color: #09090b;
}

.nuda-st2-blocked-step li.is-error {
  color: #fafafa;
}

.nuda-st2-blocked-step li.is-error .nuda-st2-blocked-step__dot {
  background: rgba(255,90,90,.12);
  border-color: #ff5a5a;
  color: #ff5a5a;
  animation: _nuda-st2blockedstep-shake .5s ease;
}

.nuda-st2-blocked-step li.is-blocked {
  opacity: .45;
}

.nuda-st2-blocked-step li.is-blocked .nuda-st2-blocked-step__dot {
  color: #63636e;
}

.nuda-st2-blocked-step em {
  display: block;
  font-style: normal;
  color: #ff8a8a;
  font-size: 10.5px;
  margin-top: 3px;
}

@keyframes _nuda-st2blockedstep-shake {
  0%,100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-st2-blocked-step li.is-error .nuda-st2-blocked-step__dot {
    animation: none;
  }
}

How to use Blocked Step State

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More steppers & wizards components

← Browse all NudaUI components