Show where something is in a fixed multi-step process — completed, current and upcoming steps on one horizontal line, with a hover description per step.
done (filled accent-green dot with a check), now (bold label, black-ring dot), todo (muted). Connector lines are ::before pseudo-elements between dots; completed segments turn green. An optional data-desc attribute renders a dark tooltip below the step on hover. The consumer sets the state classes — in AdCraft they are computed from which pipeline state files exist on disk, so the tracker cannot disagree with reality.
| Name | Type | Default | Description |
|---|---|---|---|
state | class per li | todo | done | now | todo — exactly one now per stepper |
data-desc | attribute | — | Optional hover tooltip text per step |
--sm | modifier | — | og-stepper--sm: compact dots and labels for cards |
| Variant | Proven in | Live at | Date |
|---|---|---|---|
default | 21st.dev — @originui "Stepper" (external assimilation), rebuilt as tokenized vanilla CSS on a semantic <ol> | 21st.dev | 2026-08-10 |
sm | OS-020 AdCraft operations console — corridor client cards | AdCraft ops console (docs/app) | 2026-08-10 |
packages/og-stepper.css
▾
<link rel="stylesheet" href="og-stepper.css">
<ol class="og-stepper">
<li class="done" data-desc="…">
<span class="dot"><span>1</span></span>Intake</li>
<li class="now" data-desc="…">
<span class="dot"><span>2</span></span>Brand pack</li>
<li class="todo">
<span class="dot"><span>3</span></span>Angles</li>
</ol>
<!-- compact: og-stepper og-stepper--sm -->