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

2

Company details

Website and location

3

Invite your team

Start collaborating

4

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