Blocked Step State
A copy-paste steppers & wizards component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Steppers & WizardsHTMLCSSany framework
- ✓Account
- !Verify IDUpload failed — retry to continue
- 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.