A starting point for multi-step wizard flows in React 18 + MUI 5: a stepper across the top, a content pane, and prev/next navigation that respects whether the current step is complete. Built with Create React App, so it runs with no configuration.
Included alongside it is ListItemsSelector, a reusable picker for choosing many items out of a long list.
npm install
npm start
Opens on http://localhost:3000.
The wizard shell — App.js
An MUI Stepper in alternativeLabel mode driven by a steps array, with the active index held in state. Prev is disabled on the first step; Next is disabled on the last, and while the current step has nothing selected — that small piece of validation wiring is usually the reason to start from a template rather than from the MUI docs. Step content sits in a two-column Grid, with a CircularProgress overlay while content loads.
Add a step by adding a label to the array and a branch to the content pane.
The list selector — ListItemsSelector.js
A controlled multi-select list, for when a wizard step is "pick some things out of a long list":
- Checkbox selection over an arbitrary list
- Live text search
- A show selected only toggle, so a long list collapses to the current choices
- Clear all
- Reports upward through
onSelectItems, so the parent owns the selection
<ListItemsSelector
items={items}
selectedItems={selectedItems}
onSelectItems={setSelectedItems}
height={400}
/>React 18, MUI 5 on the styled-components engine (@mui/styled-engine-sc), @mui/icons-material, Create React App via react-scripts 5.
Placeholder step content is pulled from picsum.photos, so the first render needs a network connection — swap it for your own content.
The demo link that used to be here pointed at a Cloud Storage bucket that is no longer served. Run it locally instead.