Step Flow

Pro

Step-by-step container for questionnaires and onboarding. Continue brings in the next step as the progress bar fills, and the line brightens in full once the last step is done.

Preview

Installation

npx @lumioui/cli add pro/step-flow

Usage

import { useStepFlow, StepFlow } from "@/components/ui/step-flow/step-flow";
<StepFlow />

Also exported: useStepFlow.

Examples

Fitness plan

A training app sizing your first program: goal, experience, how many days you can give it (the week strip redraws as you step), then the plan it built.

Wellbeing quiz

A wellbeing app's first-run questions.

Sign up

Creating an account for a notes app, one field per screen: name, email, then a password with a live strength meter.

API reference

StepFlowItem

Prop Type Default
index number

Stagger position. Defaults to the block's position among the step's direct children; pass it explicitly for nested blocks (grid cells).

 —
className string —
children React.ReactNode —

StepFlowTitle

Prop Type Default
index number

Stagger position. Default: its position in the step (usually 0).

 —
className string —
children React.ReactNode —

StepFlowSeal

Prop Type Default
radius number

Corner radius for the sheen's clip. Default 16.

 —

StepFlowStep

Prop Type Default
canContinue boolean

Gate the CTA — false washes it out and blocks Continue. Default true.

 —
continueLabel string

CTA label. Default "Continue" ("Done" on the last step).

 —
footer React.ReactNode

Extra node under the CTA — a "Not now" link, legal copy.

 —
hideContinue boolean

Hide the CTA for steps that advance themselves (auto-advance on pick).

 —
className string —
children React.ReactNode —

StepFlow

Prop Type Default
step number

Controlled active step (0-based).

 —
defaultStep number

Uncontrolled initial step. Default 0.

 —
onStepChange (step: number) => void

Fires with the new step on Continue / Back.

 —
onBack () => void

Back pressed on the first step — leave the flow. Without it the back button hides on step 0.

 —
onComplete () => void | Promise<unknown>

Continue pressed on the last step — runs after the seal has held (700ms). Return a Promise to show the CTA's working light until it settles.

 —
onSeal () => void

The moment the last Continue seals the flow, before the hold.

 —
progress "line" | "segments"

Progress style — one thin line, or one segment per step. Default "line".

 —
headerRight React.ReactNode

Trailing header slot — a "Skip" link. Keeps the progress centred when empty.

 —
className string —
children React.ReactNode

StepFlow.Step children, in order.

 —