Stepper

A flow in four steps: the line fills, a check draws itself on each finished step and the content slides in from where you are heading.

View the code Ask your AI

Navigation No dependencies stepswizardprogressnav Added Jan 2026

/anim/stepper/ Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Split my checkout into a Kodza Stepper.

Not plugged in yet?

claude mcp add -t http kodza https://kodza.dev/api/mcp

Also in Codex, Cursor and VS Code.

kodza-stepper.html

<div class="kodza-stepper">
  <ol class="kodza-stepper__steps">
    <li class="kodza-stepper__step"><button class="kodza-stepper__dot" type="button"><span class="kodza-stepper__num">1</span><svg class="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" pathLength="1"/></svg></button><span class="kodza-stepper__label">Copy</span></li>
    <li class="kodza-stepper__step"><button class="kodza-stepper__dot" type="button"><span class="kodza-stepper__num">2</span><svg class="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" pathLength="1"/></svg></button><span class="kodza-stepper__label">Paste</span></li>
    <li class="kodza-stepper__step"><button class="kodza-stepper__dot" type="button"><span class="kodza-stepper__num">3</span><svg class="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" pathLength="1"/></svg></button><span class="kodza-stepper__label">Tweak</span></li>
    <li class="kodza-stepper__step"><button class="kodza-stepper__dot" type="button"><span class="kodza-stepper__num">4</span><svg class="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" pathLength="1"/></svg></button><span class="kodza-stepper__label">Ship</span></li>
  </ol>
  <div class="kodza-stepper__panels" aria-live="polite">
    <section class="kodza-stepper__panel">
      <h3 class="kodza-stepper__title">Copy the code</h3>
      <p class="kodza-stepper__text">Three tabs: HTML, CSS, JS. Click the button, the clipboard does the rest.</p>
    </section>
    <section class="kodza-stepper__panel" hidden>
      <h3 class="kodza-stepper__title">Paste it anywhere</h3>
      <p class="kodza-stepper__text">A WordPress block, a Webflow embed, a plain page from 2009. It does not judge.</p>
    </section>
    <section class="kodza-stepper__panel" hidden>
      <h3 class="kodza-stepper__title">Tweak the variables</h3>
      <p class="kodza-stepper__text">Colors, sizes and timings live in --kz-* variables. Rebrand it in thirty seconds.</p>
    </section>
    <section class="kodza-stepper__panel" hidden>
      <h3 class="kodza-stepper__title">Ship it</h3>
      <p class="kodza-stepper__text">Push to production. Yes, even on a Friday. We believe in you, mostly.</p>
    </section>
    <section class="kodza-stepper__panel kodza-stepper__done" hidden>
      <h3 class="kodza-stepper__title">Shipped.</h3>
      <p class="kodza-stepper__text">Four steps, zero dependencies. Go home early.</p>
    </section>
  </div>
  <div class="kodza-stepper__actions">
    <button class="kodza-stepper__back" type="button">Back</button>
    <button class="kodza-stepper__next" type="button" data-last="Ship it" data-again="Start over">Next</button>
  </div>
</div>

kodza-stepper.css

/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Stepper
   A flow in a few steps: the line fills up to the current step, a check draws itself on each
   finished one, and the content slides in from the side you are heading to. Finished steps
   can be clicked to go back. The last panel (.kodza-stepper__done) is shown once it is all done.
   Everything is tuned with the --kz-stepper-* variables. */
.kodza-stepper {
  --kz-stepper-bg: #ffffff;
  --kz-stepper-fg: #0a0a0a;
  --kz-stepper-muted: rgba(10, 10, 10, 0.6);
  --kz-stepper-border: rgba(10, 10, 10, 0.1);
  --kz-stepper-line: rgba(10, 10, 10, 0.12);
  --kz-stepper-ink: #0a0a0a;
  --kz-stepper-on-ink: #ffffff;
  --kz-stepper-dot: 28px;
  --kz-stepper-duration: 0.6s;
  --kz-stepper-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: grid;
  gap: 28px;
  width: 100%;
  max-width: 520px;
  padding: 28px;
  border-radius: 16px;
  background: var(--kz-stepper-bg);
  box-shadow: inset 0 0 0 1px var(--kz-stepper-border);
  color: var(--kz-stepper-fg);
  box-sizing: border-box;
}

/* The steps, and the line that joins their centres */
.kodza-stepper__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--kz-stepper-n, 4), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.kodza-stepper__steps::before,
.kodza-stepper__steps::after {
  content: "";
  position: absolute;
  top: calc(var(--kz-stepper-dot) / 2 - 1px);
  left: calc(50% / var(--kz-stepper-n, 4));
  right: calc(50% / var(--kz-stepper-n, 4));
  height: 2px;
  border-radius: 2px;
  background: var(--kz-stepper-line);
}

/* The filled part only scales */
.kodza-stepper__steps::after {
  background: var(--kz-stepper-ink);
  transform: scaleX(var(--kz-stepper-progress, 0));
  transform-origin: left;
  transition: transform var(--kz-stepper-duration) var(--kz-stepper-ease);
}

.kodza-stepper__step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.kodza-stepper__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--kz-stepper-dot);
  height: var(--kz-stepper-dot);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kz-stepper-bg);
  box-shadow: inset 0 0 0 1.5px var(--kz-stepper-line);
  color: var(--kz-stepper-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.kodza-stepper__dot:disabled {
  cursor: default;
}

.kodza-stepper__dot:not(:disabled) {
  cursor: pointer;
}

.kodza-stepper__dot:focus-visible {
  outline: 2px solid var(--kz-stepper-fg);
  outline-offset: 3px;
}

.kodza-stepper__step.is-current .kodza-stepper__dot,
.kodza-stepper__step.is-done .kodza-stepper__dot {
  background: var(--kz-stepper-ink);
  box-shadow: none;
  color: var(--kz-stepper-on-ink);
}

.kodza-stepper__num,
.kodza-stepper__check {
  grid-area: 1 / 1;
}

.kodza-stepper__num {
  transition: opacity 0.2s ease, transform 0.35s var(--kz-stepper-ease);
}

.kodza-stepper__check {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s var(--kz-stepper-ease);
}

/* A finished step: the number leaves, the check draws itself */
.kodza-stepper__step.is-done .kodza-stepper__num {
  opacity: 0;
  transform: scale(0.6);
}

.kodza-stepper__step.is-done .kodza-stepper__check {
  stroke-dashoffset: 0;
  transition-delay: 0.15s;
}

.kodza-stepper__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--kz-stepper-muted);
  transition: color 0.35s ease;
}

.kodza-stepper__step.is-current .kodza-stepper__label,
.kodza-stepper__step.is-done .kodza-stepper__label {
  color: var(--kz-stepper-fg);
}

/* The content: the panels are stacked, so the card keeps the height of the tallest one and
   nothing under it moves. The old panel leaves on one side while the new one comes in from
   the side you are heading to. */
.kodza-stepper__panels {
  display: grid;
}

.kodza-stepper__panel {
  grid-area: 1 / 1;
}

.kodza-stepper.is-ready .kodza-stepper__panel[hidden] {
  display: block;
}

.kodza-stepper.is-ready .kodza-stepper__panel {
  visibility: hidden;
  opacity: 0;
  transform: translateX(calc(var(--kz-stepper-leave, -1) * 20px));
  transition:
    opacity 0.22s ease,
    transform 0.32s ease-in,
    visibility 0s linear 0.32s;
}

.kodza-stepper.is-ready .kodza-stepper__panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease 0.16s,
    transform var(--kz-stepper-duration) var(--kz-stepper-ease) 0.16s,
    visibility 0s;
}

/* Where the new panel starts from, set for an instant before it comes in */
.kodza-stepper.is-ready .kodza-stepper__panel.is-from {
  transform: translateX(calc(var(--kz-stepper-leave, -1) * -28px));
  transition: none;
}

.kodza-stepper__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.kodza-stepper__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kz-stepper-muted);
  text-wrap: pretty;
}

/* The button label rolls to its new word; the button keeps the width of the longest one */
.kodza-stepper__roll {
  display: inline-grid;
  overflow: hidden;
  vertical-align: top;
}

.kodza-stepper__roll > span {
  grid-area: 1 / 1;
}

.kodza-stepper__actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.kodza-stepper__back,
.kodza-stepper__next {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.kodza-stepper__back {
  background: none;
  box-shadow: inset 0 0 0 1px var(--kz-stepper-border);
  color: var(--kz-stepper-fg);
}

.kodza-stepper__back:hover {
  box-shadow: inset 0 0 0 1px var(--kz-stepper-muted);
}

.kodza-stepper__back:disabled {
  opacity: 0;
  pointer-events: none;
}

.kodza-stepper__next {
  background: var(--kz-stepper-ink);
  color: var(--kz-stepper-on-ink);
}

.kodza-stepper__back:focus-visible,
.kodza-stepper__next:focus-visible {
  outline: 2px solid var(--kz-stepper-fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-stepper__steps::after,
  .kodza-stepper__dot,
  .kodza-stepper__num,
  .kodza-stepper__check,
  .kodza-stepper__label {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .kodza-stepper.is-ready .kodza-stepper__panel,
  .kodza-stepper.is-ready .kodza-stepper__panel.is-active {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-stepper {
  --kz-stepper-bg: #161616;
  --kz-stepper-fg: #f2f2f0;
  --kz-stepper-muted: rgba(242, 242, 240, 0.58);
  --kz-stepper-border: rgba(255, 255, 255, 0.12);
  --kz-stepper-line: rgba(255, 255, 255, 0.16);
  --kz-stepper-ink: #f2f2f0;
  --kz-stepper-on-ink: #161616;
}
*/

/* kodza-guard 523704681d02 — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-stepper__dot):not(#_),
:where(.kodza-stepper__back):not(#_),
:where(.kodza-stepper__next):not(#_) {
  outline: revert;
  outline-offset: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-stepper__steps:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-stepper__step:not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-stepper__dot:not(#_) {
  margin: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  min-height: revert;
}

.kodza-stepper__num:not(#_),
.kodza-stepper__label:not(#_),
.kodza-stepper__panels:not(#_),
.kodza-stepper__panel:not(#_),
.kodza-stepper__actions:not(#_),
.kodza-stepper__roll:not(#_),
.kodza-stepper__roll span:where(:not([class*="kodza-"])):not(#_) {
  box-sizing: revert;
}

.kodza-stepper__check:not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-stepper__title:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-style: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-stepper__text:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-stepper__back:not(#_) {
  margin: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  min-height: revert;
}

.kodza-stepper__next:not(#_) {
  margin: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  min-height: revert;
}

.kodza-stepper__check:not(#_):where(:not([hidden])),
.kodza-stepper__title:not(#_):where(:not([hidden])),
.kodza-stepper__text:not(#_):where(:not([hidden])),
.kodza-stepper__back:not(#_):where(:not([hidden])),
.kodza-stepper__next:not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-stepper__check:not(#_):where([hidden]),
.kodza-stepper__title:not(#_):where([hidden]),
.kodza-stepper__text:not(#_):where([hidden]),
.kodza-stepper__back:not(#_):where([hidden]),
.kodza-stepper__next:not(#_):where([hidden]) {
  display: none;
}

.kodza-stepper__steps:not(#_)::before,
.kodza-stepper__steps:not(#_)::after {
  box-sizing: revert;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-stepper:not(#_) {
  width: min(100%, 520px);
}

.kodza-stepper__steps:not(#_) {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kodza-stepper__step:not(#_) {
  position: relative;
  display: grid;
}

.kodza-stepper__dot:not(#_) {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--kz-stepper-dot);
  height: var(--kz-stepper-dot);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kz-stepper-bg);
  box-shadow: inset 0 0 0 1.5px var(--kz-stepper-line);
  color: var(--kz-stepper-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.kodza-stepper__dot:disabled:not(#_) {
  cursor: default;
}

.kodza-stepper__dot:not(:disabled):not(#_) {
  cursor: pointer;
}

.kodza-stepper__dot:focus-visible:not(#_) {
  outline: 2px solid var(--kz-stepper-fg);
  outline-offset: 3px;
}

.kodza-stepper__step.is-current .kodza-stepper__dot:not(#_),
.kodza-stepper__step.is-done .kodza-stepper__dot:not(#_) {
  background: var(--kz-stepper-ink);
  box-shadow: none;
  color: var(--kz-stepper-on-ink);
}

.kodza-stepper__check:not(#_) {
  transition: stroke-dashoffset 0.4s var(--kz-stepper-ease);
}

.kodza-stepper__step.is-done .kodza-stepper__check:not(#_) {
  transition-delay: 0.15s;
}

.kodza-stepper__title:not(#_) {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.kodza-stepper__text:not(#_) {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kz-stepper-muted);
}

.kodza-stepper__back:not(#_),
.kodza-stepper__next:not(#_) {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.kodza-stepper__back:not(#_) {
  background: none;
  box-shadow: inset 0 0 0 1px var(--kz-stepper-border);
  color: var(--kz-stepper-fg);
}

.kodza-stepper__back:hover:not(#_) {
  box-shadow: inset 0 0 0 1px var(--kz-stepper-muted);
}

.kodza-stepper__back:disabled:not(#_) {
  opacity: 0;
  pointer-events: none;
}

.kodza-stepper__next:not(#_) {
  background: var(--kz-stepper-ink);
  color: var(--kz-stepper-on-ink);
}

.kodza-stepper__back:focus-visible:not(#_),
.kodza-stepper__next:focus-visible:not(#_) {
  outline: 2px solid var(--kz-stepper-fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-stepper__dot:not(#_) {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-stepper__check:not(#_) {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

kodza-stepper.js

// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Stepper
// Moves between the steps (Next, Back, or a click on a finished step), fills the line, marks
// the steps and swaps the panels: the old one leaves while the new one comes in from the side
// you are heading to. After the last step, Next shows the .kodza-stepper__done panel and
// becomes "Start over", its label rolling to the new word. Fires "kodza:step" with { step }
// (0-based; steps.length means done).
(() => {
  const SELECTOR = '.kodza-stepper';
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // One instance. Everything it starts is tied to `signal`, so kodza:destroy stops it all
  function mount(root, signal) {
    const steps = [...root.querySelectorAll('.kodza-stepper__step')];
    const panels = [...root.querySelectorAll('.kodza-stepper__panel:not(.kodza-stepper__done)')];
    const done = root.querySelector('.kodza-stepper__done');
    const back = root.querySelector('.kodza-stepper__back');
    const next = root.querySelector('.kodza-stepper__next');
    if (!steps.length || !next) return;
    const all = [...panels, done].filter(Boolean);
    const labels = { next: next.textContent.trim(), last: next.dataset.last || 'Finish', again: next.dataset.again || 'Start over' };
    const style = getComputedStyle(root);
    const duration = parseFloat(style.getPropertyValue('--kz-stepper-duration')) * 1000 || 600;
    const ease = style.getPropertyValue('--kz-stepper-ease').trim() || 'ease';
    root.style.setProperty('--kz-stepper-n', steps.length);

    // The label sits in a little window, and the button is as wide as its longest label
    const roll = document.createElement('span');
    roll.className = 'kodza-stepper__roll';
    const word = document.createElement('span');
    word.textContent = labels.next;
    roll.append(word);
    next.replaceChildren(roll);
    next.style.minWidth = `${Math.max(...[labels.next, labels.last, labels.again].map((text) => {
      word.textContent = text;
      return next.offsetWidth;
    }))}px`;
    word.textContent = labels.next;

    const setLabel = (text) => {
      const prev = roll.lastElementChild;
      if (prev.textContent === text) return;
      const span = document.createElement('span');
      span.textContent = text;
      roll.append(span);
      if (reduceMotion) return prev.remove();
      prev.setAttribute('aria-hidden', 'true');
      prev.animate([{ transform: 'none' }, { transform: 'translateY(-110%)' }], { duration: duration * 0.8, easing: ease, fill: 'forwards' }).finished.then(() => prev.remove());
      span.animate([{ transform: 'translateY(110%)' }, { transform: 'none' }], { duration: duration * 0.8, easing: ease });
    };

    let current = -1;
    const go = (index) => {
      const target = Math.max(0, Math.min(steps.length, index));
      if (target === current) return;
      const forward = target > current;
      const finished = target === steps.length;
      steps.forEach((step, i) => {
        step.classList.toggle('is-done', i < target);
        step.classList.toggle('is-current', i === target);
        const dot = step.querySelector('.kodza-stepper__dot');
        const label = step.querySelector('.kodza-stepper__label')?.textContent.trim() || `Step ${i + 1}`;
        dot.disabled = i >= target;
        dot.setAttribute('aria-label', `${label}, step ${i + 1} of ${steps.length}${i < target ? ', done' : i === target ? ', current' : ''}`);
        if (i === target) step.setAttribute('aria-current', 'step');
        else step.removeAttribute('aria-current');
      });
      root.style.setProperty('--kz-stepper-progress', steps.length > 1 ? Math.min(target, steps.length - 1) / (steps.length - 1) : 1);

      // The old panel leaves on the side you come from, the new one enters from the other
      const show = finished ? done : panels[target];
      root.style.setProperty('--kz-stepper-leave', forward ? -1 : 1);
      all.forEach((panel) => {
        if (panel !== show) panel.classList.remove('is-active');
      });
      if (show) {
        if (current >= 0) {
          show.classList.add('is-from');
          void show.offsetWidth;
          show.classList.remove('is-from');
        }
        show.classList.add('is-active');
      }

      if (back) back.disabled = target === 0 || finished;
      setLabel(finished ? labels.again : target === steps.length - 1 ? labels.last : labels.next);
      current = target;
      root.dispatchEvent(new CustomEvent('kodza:step', { detail: { step: target }, bubbles: true }));
    };

    next.addEventListener('click', () => go(current === steps.length ? 0 : current + 1), { signal });
    back?.addEventListener('click', () => go(current - 1), { signal });
    steps.forEach((step, i) => step.querySelector('.kodza-stepper__dot')?.addEventListener('click', () => go(i), { signal }));

    // From here, the panels are shown by the script (stacked), not by the hidden attribute
    all.forEach((panel) => panel.removeAttribute('hidden'));
    root.classList.add('is-ready');
    go(0);
  }

  // Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
  // event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
  // markup back. For themes and apps that swap content without a page load.
  const instances = new WeakMap();
  const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
  const init = (scope) => find(scope).forEach((root) => {
    if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
    const controller = new AbortController();
    instances.set(root, { controller, html: root.innerHTML, attrs: [...root.attributes].map((a) => [a.name, a.value]) });
    mount(root, controller.signal);
    root.classList.add('is-ready');
  });
  const destroy = (scope) => find(scope).forEach((root) => {
    const instance = instances.get(root);
    if (!instance) return;
    instances.delete(root);
    instance.controller.abort();
    [...root.attributes].forEach((a) => root.removeAttribute(a.name));
    instance.attrs.forEach(([name, value]) => root.setAttribute(name, value));
    root.innerHTML = instance.html;
  });
  document.addEventListener('kodza:init', (event) => init(event.detail?.root));
  document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
  init();
  // Loaded in <head>, the script runs before the markup exists: once more when it is parsed
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();

Stepper.tsx

'use client';
// Kodza — Stepper, for React. From https://kodza.dev/components/stepper/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: stepper.css and stepper.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './stepper.css';

export type StepperProps = Omit<ComponentPropsWithoutRef<'div'>, "children" | "vars" | "onStep"> & {
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #ffffff */
    "--kz-stepper-bg"?: string | number;
    /** default: #0a0a0a */
    "--kz-stepper-fg"?: string | number;
    /** default: rgba(10, 10, 10, 0.6) */
    "--kz-stepper-muted"?: string | number;
    /** default: rgba(10, 10, 10, 0.1) */
    "--kz-stepper-border"?: string | number;
    /** default: rgba(10, 10, 10, 0.12) */
    "--kz-stepper-line"?: string | number;
    /** default: #0a0a0a */
    "--kz-stepper-ink"?: string | number;
    /** default: #ffffff */
    "--kz-stepper-on-ink"?: string | number;
    /** default: 28px */
    "--kz-stepper-dot"?: string | number;
    /** default: 0.6s */
    "--kz-stepper-duration"?: string | number;
    /** default: cubic-bezier(0.22, 1, 0.36, 1) */
    "--kz-stepper-ease"?: string | number;
  };
  /** "kodza:step", fired by the script (bubbles from the root) */
  onStep?: (event: CustomEvent) => void;
  className?: string;
};

export function Stepper({ vars, onStep, className, style, ...rest }: StepperProps) {
  const ref = useRef<ComponentRef<'div'>>(null);
  const classes = ["kodza-stepper", className].filter(Boolean).join(' ');
  // Everything the markup is made of: when it changes, React gets a fresh element (see the top)
  const key = JSON.stringify([classes, vars, style, rest]);

  // Starts the script on this element once React has rendered it, stops it when it goes
  useEffect(() => {
    const root = ref.current;
    let live = true;
    // @ts-ignore: a plain script, no types to find
    import('./stepper.js').then(() => {
      if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
    });
    return () => {
      live = false;
      document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
    };
  }, [key]);

  useEffect(() => {
    const root = ref.current;
    if (!root || !onStep) return;
    const listener = (event: Event) => onStep(event as CustomEvent);
    root.addEventListener("kodza:step", listener);
    return () => root.removeEventListener("kodza:step", listener);
  }, [onStep, key]);

  return (
    <div key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <ol className="kodza-stepper__steps">
        <li className="kodza-stepper__step">
          <button className="kodza-stepper__dot" type="button">
            <span className="kodza-stepper__num">1</span>
            <svg className="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M3.5 8.5l3 3 6-7" pathLength="1" />
            </svg>
          </button>
          <span className="kodza-stepper__label">Copy</span>
        </li>
        <li className="kodza-stepper__step">
          <button className="kodza-stepper__dot" type="button">
            <span className="kodza-stepper__num">2</span>
            <svg className="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M3.5 8.5l3 3 6-7" pathLength="1" />
            </svg>
          </button>
          <span className="kodza-stepper__label">Paste</span>
        </li>
        <li className="kodza-stepper__step">
          <button className="kodza-stepper__dot" type="button">
            <span className="kodza-stepper__num">3</span>
            <svg className="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M3.5 8.5l3 3 6-7" pathLength="1" />
            </svg>
          </button>
          <span className="kodza-stepper__label">Tweak</span>
        </li>
        <li className="kodza-stepper__step">
          <button className="kodza-stepper__dot" type="button">
            <span className="kodza-stepper__num">4</span>
            <svg className="kodza-stepper__check" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M3.5 8.5l3 3 6-7" pathLength="1" />
            </svg>
          </button>
          <span className="kodza-stepper__label">Ship</span>
        </li>
      </ol>
      <div className="kodza-stepper__panels" aria-live="polite">
        <section className="kodza-stepper__panel">
          <h3 className="kodza-stepper__title">Copy the code</h3>
          <p className="kodza-stepper__text">Three tabs: HTML, CSS, JS. Click the button, the clipboard does the rest.</p>
        </section>
        <section className="kodza-stepper__panel" hidden>
          <h3 className="kodza-stepper__title">Paste it anywhere</h3>
          <p className="kodza-stepper__text">A WordPress block, a Webflow embed, a plain page from 2009. It does not judge.</p>
        </section>
        <section className="kodza-stepper__panel" hidden>
          <h3 className="kodza-stepper__title">Tweak the variables</h3>
          <p className="kodza-stepper__text">Colors, sizes and timings live in --kz-* variables. Rebrand it in thirty seconds.</p>
        </section>
        <section className="kodza-stepper__panel" hidden>
          <h3 className="kodza-stepper__title">Ship it</h3>
          <p className="kodza-stepper__text">Push to production. Yes, even on a Friday. We believe in you, mostly.</p>
        </section>
        <section className="kodza-stepper__panel kodza-stepper__done" hidden>
          <h3 className="kodza-stepper__title">Shipped.</h3>
          <p className="kodza-stepper__text">Four steps, zero dependencies. Go home early.</p>
        </section>
      </div>
      <div className="kodza-stepper__actions">
        <button className="kodza-stepper__back" type="button">Back</button>
        {' '}
        <button className="kodza-stepper__next" type="button" data-last="Ship it" data-again="Start over">Next</button>
      </div>
    </div>
  );
}

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run Oct 19, 2026

Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues

KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed

Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed

Light and darkThe same checks on both themes, contrast included. Passed

WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes

Robots checked this. A human with VoiceOver hasn't yet.