Lumeo

Steps

A step tracker for multi-step workflows and wizards.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Steps />

When to Use

  • Multi-step processes such as forms, registrations, or checkout flows
  • Setup wizards that guide users through sequential configuration
  • Onboarding flows where users complete tasks in a defined order
  • Checkout or payment workflows with clearly defined stages

Account

Create your account

2

Profile

Set up your profile

3

Complete

All done

Details

Payment

Review

Confirm

Current step: 0

Sign Up

Create an account

Verify Email

Confirm your email address

3

Set Password

Choose a secure password

4

Done

Start using the app

Switch orientation to compare horizontal and vertical layouts.

Account

Create your account

2

Profile

Set up your profile

3

Payment

Add billing info

4

Done

All finished

Account

Create your account

Payment

Card declined

3

Review

Confirm details

4

Done

All finished

Account

Create your account

Payment

Add billing info

Done

All finished

Account

Create your account

2

Profile

Set up your profile

3

Payment

Add billing

4

Complete

All done

Active dot pulses; the connector draws in on Next and retracts on Previous.

API Reference

Steps

StepsItem

  • Progress — Show completion percentage instead of discrete steps
  • Tabs — Switch between views without implying sequential order
  • Timeline — Display events chronologically rather than as actionable steps