REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Navigation
Stepper
A multi-step progress indicator showing completion through sequential steps.
Example
Preview
Code
Props
Stepper Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the stepper container.
activeStep *
number
—
The index of the currently active step (zero-based).
orientation
'horizontal' | 'vertical'
'horizontal'
The layout orientation of the stepper.
Step Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for an individual step.
StepIndicator Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the step number/icon indicator.
StepSeparator Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the line between steps.
StepTitle Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the step title text.
StepDescription Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the step description text.
Usage Guidelines
When to use
Use Stepper for multi-step workflows like forms, onboarding wizards, or checkout flows.
Best practices
•
Limit steps to 3-5 for usability — break complex flows into sub-steps.
•
Show completed steps with a checkmark icon in the StepIndicator.
•
Use vertical orientation for mobile layouts and horizontal for wider screens.
Accessibility
Stepper announces the total number of steps and current step position. Each step is labeled with its title and completion status.
Related Components
Timeline
Displays a chronological sequence of events with dots and connectors.
Progress
A compound progress bar component that visually indicates the completion percentage of an operation.
Tabs
A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.