# Step Flow

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.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/step-flow
```

## Import

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

## Variants

- `fitness` — Fitness plan: `npx @lumioui/cli add pro/step-flow-fitness`
- `quiz` — Wellbeing quiz: `npx @lumioui/cli add pro/step-flow-quiz`
- `signup` — Sign up: `npx @lumioui/cli add pro/step-flow-signup`

## Props

### StepFlowItem

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `index?` | `number` | Stagger position. Default: its position in the step (usually 0). |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### StepFlowSeal

| Prop | Type | Notes |
| --- | --- | --- |
| `radius?` | `number` | Corner radius for the sheen's clip. Default 16. |

### StepFlowStep

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `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. |

## Icons rendered

- `chevron-left` — /icons.html?i=chevron-left

Source: https://lumioui.com/components/step-flow