StepIndicator

StepIndicator shows progress through a multi-step process. Use for wizards, onboarding flows, or guided experiences.

Preview

Light Dark OLED

Global

✓

Question

2

Cast

3

Interpret

---

Basic Usage

Light Dark OLED

Global

✓

Step 1

2

Step 2

3

Step 3

<StepIndicator
  steps={[
    { key: 'question', label: 'Question' },
    { key: 'cast', label: 'Cast' },
    { key: 'interpret', label: 'Interpret' },
  ]}
  currentStep={1}
/>

---

Vertical Layout

Light Dark OLED

Global

✓

Ask Your QuestionFocus your mind on what you want to know

2

Cast HexagramThrow the coins six times

3

InterpretationReview the reading and reflect

<StepIndicator
  variant="vertical"
  steps={[
    { key: 'question', label: 'Ask Your Question', description: 'Focus your mind on what you want to know' },
    { key: 'cast', label: 'Cast Hexagram', description: 'Throw the coins six times' },
    { key: 'interpret', label: 'Interpretation', description: 'Review the reading and reflect' },
  ]}
  currentStep={1}
/>

---

Interactive Steps

Allow clicking on completed steps to navigate back.

Light Dark OLED

Global

✓

Setup

✓

Details

3

Confirm

4

Done

<StepIndicator
  steps={steps}
  currentStep={2}
  onStepPress={(index) => setCurrentStep(index)}
/>

---

API Reference

StepIndicator Props

Prop	Type	Default	Description
steps	Step[]	Required	Array of steps
currentStep	number	Required	Currently active step index
variant	'horizontal' | 'vertical'	'horizontal'	Layout variant
onStepPress	(index: number) => void	-	Click handler for completed steps
style	ViewStyle	-	Custom styles
accessibilityLabel	string	'Progress indicator'	Screen reader label

Step

Prop	Type	Required	Description
key	string	Yes	Unique step identifier
label	string	Yes	Step label text
description	string	No	Optional description
completedIcon	ReactNode	No	Custom completed icon