# Onboarding screens with progress indicators

[Open the live Fudge conversation](https://design.withfudge.com/share/onboarding-screens-progress-indicators)

Last updated: 2026-07-28

Good onboarding progress indicators answer two questions: where am I, and how much is left? They should also avoid making optional setup feel like a blocking checklist.

## Useful references

## UI checklist

- Current step label.
- Completed, active, and upcoming states.
- Save or skip affordance where appropriate.
- Clear summary after completion.
- Progress indicator stays secondary to the next action.

## design.md

Use progress for orientation, not pressure. Keep the next action dominant, make completed steps visibly different from upcoming steps, and reserve checklist-style progress for setup tasks that genuinely require completion.

## Captured pages

[![Kraa.io](https://pin.fontofweb.com/9610?format=jpg)](https://design.withfudge.com/share/pin-9610)

[Kraa.io](https://design.withfudge.com/share/pin-9610)

[![Overview](https://pin.fontofweb.com/6754?format=jpg)](https://design.withfudge.com/share/pin-6754)

[Overview](https://design.withfudge.com/share/pin-6754)

[![Firecrawl onboarding](https://pin.fontofweb.com/7562?format=jpg)](https://design.withfudge.com/share/pin-7562)

[Firecrawl onboarding](https://design.withfudge.com/share/pin-7562)

[![Audience Size](https://pin.fontofweb.com/5170?format=jpg)](https://design.withfudge.com/share/pin-5170)

[Audience Size](https://design.withfudge.com/share/pin-5170)

[![Why write on Medium?](https://pin.fontofweb.com/9601?format=jpg)](https://design.withfudge.com/share/pin-9601)

[Why write on Medium?](https://design.withfudge.com/share/pin-9601)

[![Refero research flow](https://pin.fontofweb.com/9684?format=jpg)](https://design.withfudge.com/share/pin-9684)

[Refero research flow](https://design.withfudge.com/share/pin-9684)