Progress Step
Multi-step progress trackers for onboarding flows, wizards, and checkout sequences. Three indicator styles — dot, icon, and numbered — in horizontal or vertical orientations, with solid or dashed connectors.
Horizontal — dot
Compact circle indicators connected by a solid line. Completed steps show a checkmark, the active step has a focus ring and inner dot, upcoming steps are outlined.
Your details
Name and email
Company details
Website and location
Invite your team
Start collaborating
Add your socials
Automatic sharing
Horizontal — icon
Larger square icon boxes replace the circle indicator. Active and completed icons are full-contrast; upcoming icons and labels are dimmed to 60% opacity.
Your details
Name and email
Company details
Website and location
Invite your team
Start collaborating
Add your socials
Automatic sharing
Horizontal — numbered with dashed connector
Step numbers instead of dots. Completed steps turn green with a checkmark; future steps and their labels are at 60% opacity. The connector uses a rounded SVG dot-dash pattern.
Your details
Name and email
Company details
Website and location
Invite your team
Start collaborating
Add your socials
Automatic sharing
Horizontal — dot (first step active)
All steps upcoming except the first, showing the initial entry state with no completed history.
Your details
Name and email
Company details
Website and location
Invite your team
Start collaborating
Add your socials
Automatic sharing
Vertical — dot
Steps stack vertically with a left-border connector between them. Same state logic as horizontal — checkmark, active ring, outlined upcoming. Labels are left-aligned.
Your details
Please provide your name and email
Company details
A few details about your company
Invite your team
Start collaborating with your team
Add your socials
Share posts to your social accounts
Vertical — icon
Icon variant in vertical layout. Upcoming steps are dimmed; the vertical connector bridges the gap between icon boxes.
Your details
Name and email
Company details
Website and location
Invite your team
Start collaborating
Add your socials
Automatic sharing