inline-css-bits

Esc

Stepper

1
Setup
2
Config
3
Deploy
<div style="display:flex;align-items:center;gap:0;max-width:400px"><div style="display:flex;flex-direction:column;align-items:center;gap:4px"><div style="width:32px;height:32px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.8em;font-weight:bold;line-height:32px">1</div><span style="font-size:0.7em;color:#94a3b8">Setup</span></div><div style="flex:1;height:2px;background:#6366f1;margin:0 -4px;margin-bottom:20px"></div><div style="display:flex;flex-direction:column;align-items:center;gap:4px"><div style="width:32px;height:32px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.8em;font-weight:bold;line-height:32px">2</div><span style="font-size:0.7em;color:#94a3b8">Config</span></div><div style="flex:1;height:2px;background:#334155;margin:0 -4px;margin-bottom:20px"></div><div style="display:flex;flex-direction:column;align-items:center;gap:4px"><div style="width:32px;height:32px;border-radius:50%;border:2px solid #334155;color:#64748b;display:flex;align-items:center;justify-content:center;font-size:0.8em;font-weight:bold;line-height:28px">3</div><span style="font-size:0.7em;color:#64748b">Deploy</span></div></div>

Customize

#6366f1

Props

Name Type Default Description
text text 1 Displayed text
activeColor color #6366f1 Active step color

Step progress indicator with connected dots

stepperprogressstepsindicator