Skip to content
Try free

Steppers and wizards (Desktop)

Desktop packFlows

Desktop steppers, wizard modals, task lists, setup guides, save and exit, progress trackers and check answers.

components
8
variants
26
recreations
3
themes
2

Also for mobile: Steppers and wizards

What’s inside

Horizontal and vertical steppers, a task list, a wizard modal with a leave confirmation, a setup guide with skipped steps, save and exit with resume, a progress tracker for applications and a check your answers summary. Progress bars match the step shown. Every page has documentation and a live grid in Light and Dark, Comfortable and Compact, and the steppers and modal appear in page scenes.

  • 8 stepper and wizard patterns
  • Attention state for steps that need a change
  • Save and exit, resume and check your answers
  • 3 recreations from Stripe, GOV.UK and Shopify
  • Horizontal stepper, every variant

    Horizontal stepper

    4 variants

    • Start
    • Middle
    • Attention
    • Complete
  • Vertical stepper, every variant

    Vertical stepper

    Free sample

    3 variants

    • Middle
    • Attention
    • Complete
  • Task list, every variant

    Task list

    2 variants

    • Started
    • Ready to submit
  • Wizard modal, every variant

    Wizard modal

    4 variants

    • First
    • Middle
    • Last
    • Leaving
  • Setup guide, every variant

    Setup guide

    3 variants

    • In progress
    • One skipped
    • All done
  • Save and exit, every variant

    Save and exit

    4 variants

    • Saving
    • Saved
    • Exit confirm
    • Resume
  • Progress tracker, every variant

    Progress tracker

    4 variants

    • Submitted
    • In review
    • Action needed
    • Decided
  • Check your answers, every variant

    Check your answers

    2 variants

    • Complete
    • Missing answer
Figma file
SuperDuper Pack: Steppers and wizards (Desktop)
Themes
Light and Dark
Densities
Comfortable and Compact
Also in the file
Usage and accessibility notes, motion specs, Figma variables
Covers 1 screen pattern
Progress & tracking

How Stripe, GOV.UK and Shopify do it

Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.

  • Payments onboarding, every variant

    Payments onboarding

    Recreated from Stripe

  • Government service, every variant

    Government service

    Recreated from GOV.UK

  • Store setup guide, every variant

    Store setup guide

    Recreated from Shopify

Not affiliated with, endorsed or sponsored by Stripe, GOV.UK and Shopify. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Vertical stepper, every variant

See the vertical stepper full size, free

A vertical step rail mid-way, with a step that needs attention, and complete. All 3 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More flows packs

See all flows

  • Profile and settings

    Desktop27 components135 variants4 recreations

    Desktop settings screens: shell, profile, team members, roles, API keys, notifications, theme, security and danger zone.

    $9, or included with Pro

  • Checkout and payments

    Desktop12 components48 variants4 recreations

    Desktop checkout pages, card and address forms, order summaries, invoices and payment results, ready to compose.

    $9, or included with Pro

  • Auth and sign-in

    Desktop13 components47 variants4 recreations

    Desktop sign-in, sign-up, SSO, passkey, two-factor, magic link, password reset and invite screens with every state.

    $9, or included with Pro

Questions about the steppers and wizards pack

  • One Figma file: SuperDuper Pack: Steppers and wizards (Desktop). It has 8 components with 26 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.