The repository with example code can be found at<a class="post-link" href="https://github.com/bdconnors/step-wizard-example" rel="noopener noreferrer" target="_blank">https://github.com/bdconnors/step-wizard-example</a> Introduction A Step Wizard simplifies complex multi-step forms or processes by breaking them down into smaller steps. It also keeps track of progress and provides a visual indicator to help guide the user through each step. In this article, we will be building a Step Wizard component using React and Chakra UI. If you&#39;re not familiar with Chakra UI, it is a highly flexible React component library that comes with numerous useful features out of the box. Setup The example code was done within a Next.js app but it will work with any project using React. 1. Create a new Next.js 13 Project <div class="code-block"><code>npx create-next-app@latest</code></div> You will be prompted for a few things, just be sure to choose TypeScript and to use the App Router. &nbsp;2. Install Chakra UI and its dependencies in your project folder <div class="code-block"><code>npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion</code></div> 3. Add a components folder and a models folder inside the src directory. Your folder structure should now look like this: <a href="https://cdn.cosmicjs.com/37754860-ef62-11ed-b7bd-57cb4c9665a9-sw1.png" rel="noopener noreferrer" target="_blank"><img class="fr-fic fr-dii" src="https://cdn.cosmicjs.com/37754860-ef62-11ed-b7bd-57cb4c9665a9-sw1.png" style="width: 257px;"></a> 4. Run <code>npm run dev</code> to start the app on http://localhost:3000 Components Now that we have our project setup we can start adding our components. The first thing that we are going to need is a model for our steps. Now that we have our project set up, we can begin adding our components. The first requirement is to have a model for our steps. Create a StepModel.ts file in the models folder. It should contain the following code: <div class="code-block"><code>export interface StepModel { &ensp;title: string, &ensp;description: string, &ensp;component: JSX.Element //the component to display }</code></div> Next, we need a tracker to indicate the progress made in our multi-step process. There are several approaches to this, but in this article, we will only cover a couple of them Step Tracker <a href="https://cdn.cosmicjs.com/60ee06d0-ef69-11ed-b7bd-57cb4c9665a9-sw2.png" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/60ee06d0-ef69-11ed-b7bd-57cb4c9665a9-sw2.png" style="width: 594px;" class="fr-fic fr-dib fr-fil"></a> A Step Tracker tracks each step individually and can be displayed vertically or horizontally. Create a StepTracker.tsx file in the components folder. It should contain the following code: <div class="code-block"><code>&quot;use client&quot;;import&nbsp;{&nbsp;StepModel&nbsp;}&nbsp;from&nbsp;&quot;@/models/StepModel&quot;;import&nbsp;{&nbsp;Box,&nbsp;Step,&nbsp;StepDescription,&nbsp;StepIcon,&nbsp;StepIndicator,&nbsp;StepNumber,&nbsp;Stepper,&nbsp;StepSeparator,&nbsp;StepStatus,&nbsp;StepTitle&nbsp;}&nbsp;from&nbsp;&quot;@chakra-ui/react&quot;export&nbsp;interface&nbsp;StepTrackerProps&nbsp;{&nbsp; steps: StepModel[],&nbsp; active: number,&nbsp; size?: &#39;sm&#39; | &#39;md&#39; | &#39;lg&#39;,&nbsp; orientation?: &#39;horizontal&#39; | &#39;vertical&#39;,&nbsp; colorScheme?: string,&nbsp; height?: string}export&nbsp;const&nbsp;StepTracker&nbsp;= (props:&nbsp;StepTrackerProps)&nbsp;=&gt;&nbsp;{&nbsp; const { steps, active, size = &#39;lg&#39;, orientation = &#39;horizontal&#39;, height, colorScheme } = props;&nbsp;&nbsp; return (&nbsp; &nbsp; &lt;Stepper&nbsp;&nbsp; &nbsp; &nbsp; index={active}&nbsp;&nbsp; &nbsp; &nbsp; size={size}&nbsp;&nbsp; &nbsp; &nbsp; orientation={orientation}&nbsp;&nbsp; &nbsp; &nbsp; height={height}&nbsp;&nbsp; &nbsp; &nbsp; colorScheme={colorScheme}&nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; {steps.map((step, index) =&gt; (&nbsp; &nbsp; &nbsp; &nbsp; &lt;Step key={index}&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;StepIndicator&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;StepStatus&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; complete={&lt;StepIcon /&gt;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; incomplete={&lt;StepNumber /&gt;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; active={&lt;StepNumber /&gt;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/StepIndicator&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Box flexShrink=&#39;0&#39;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;StepTitle&gt;{step.title}&lt;/StepTitle&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;StepDescription&gt;{step.description}&lt;/StepDescription&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Box&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;StepSeparator /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Step&gt;&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &lt;/Stepper&gt;&nbsp; )}</code></div> The required props for StepWizard include an array of StepModel and the active step index. These props enable us to display the title, description, and status of each step. Optional props for StepWizard include size, orientation, height, and color scheme (with a default of blue). The useSteps hook controls and updates the status of each step, which will be utilized in our StepWizard component Percent Tracker <a href="https://imgix.cosmicjs.com/93000510-ef69-11ed-b7bd-57cb4c9665a9-sw4.png" rel="noopener noreferrer" target="_blank"><img src="https://imgix.cosmicjs.com/93000510-ef69-11ed-b7bd-57cb4c9665a9-sw4.png" data-name="sw4.png" style="width: 594px;" class="fr-fic fr-dib"></a> The second tracker is less sophisticated and tracks progress with a solid bar and percentage label. Create a PercentTracker.tsx file in the components folder. It should contain the following: <div class="code-block"><code>&quot;use client&quot;;import&nbsp;{&nbsp;Box,&nbsp;Center,&nbsp;HStack,&nbsp;Progress,&nbsp;Stack,&nbsp;useBreakpointValue,&nbsp;Text&nbsp;}&nbsp;from&nbsp;&quot;@chakra-ui/react&quot;;export&nbsp;interface&nbsp;PercentTrackerProps&nbsp;{&nbsp; colorScheme?: string,&nbsp; active: number,&nbsp; total: number}export&nbsp;const&nbsp;PercentTracker&nbsp;= (props:&nbsp;PercentTrackerProps)&nbsp;=&gt;&nbsp;{&nbsp; const { colorScheme = &#39;blue&#39;, active, total } = props; //default to blue if no value provided&nbsp; //scale bar to fit screen size&nbsp; const barWidth = useBreakpointValue({&nbsp; &nbsp; base: &#39;15em&#39;,&nbsp;&nbsp; &nbsp; sm: &#39;15em&#39;,&nbsp;&nbsp; &nbsp; md: &#39;30em&#39;,&nbsp;&nbsp; &nbsp; lg: &#39;55em&#39;,&nbsp;&nbsp; &nbsp; xl: &#39;55em&#39;&nbsp; });&nbsp;&nbsp; const progress = &nbsp;Math.round((active / total) * 100);&nbsp; return (&nbsp; &nbsp; &lt;Stack direction=&quot;column&quot; pb={4}&gt;&nbsp; &nbsp; &nbsp; &lt;Center&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Box px={0}&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Progress&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={progress}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderRadius={12}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h=&quot;1em&quot;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w={barWidth}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colorScheme={colorScheme}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Box&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Text fontWeight=&#39;semibold&#39;&gt;{ `${progress}%` }&lt;/Text&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/HStack&gt;&nbsp; &nbsp; &nbsp; &lt;/Center&gt;&nbsp; &nbsp; &lt;/Stack&gt;&nbsp; );}</code></div> The required props for the StepProgressBar component are the active step index and the total number of steps. These props enable us to calculate the completion percentage. Additionally, there is an optional prop called color scheme, which allows for changing the color of the progress bar (with a default value of blue). To ensure responsiveness, we have included the useBreakpointValue hook, which dynamically scales the width of the progress bar based on the client&#39;s screen size Step Wizard Our StepWizard acts as the driver for a multi-step process. It requires an array of StepModel as a prop and contains our tracker, which can be changed via the tracker prop (default is StepTracker). The useSteps hook controls the state by providing the active step index and functions to move steps forward and backward. <div class="code-block"><code>&quot;use client&quot;;import { Button, HStack, Stack, useSteps, VStack } from &quot;@chakra-ui/react&quot;import&nbsp;{&nbsp;StepTracker&nbsp;}&nbsp;from&nbsp;&quot;./StepTracker&quot;import&nbsp;{&nbsp;PercentTracker&nbsp;}&nbsp;from&nbsp;&quot;./PercentTracker&quot;;import&nbsp;{&nbsp;StepModel&nbsp;}&nbsp;from&nbsp;&quot;@/models/StepModel&quot;;export&nbsp;interface&nbsp;StepWizardProps&nbsp;{&nbsp; tracker?: &#39;steps&#39; | &#39;percent&#39;,&nbsp; orientation?: &#39;horizontal&#39; | &#39;vertical&#39;,&nbsp; colorScheme?: &#39;red&#39; | &#39;orange&#39; | &#39;yellow&#39; | &#39;green&#39; | &#39;blue&#39;,&nbsp; steps: StepModel[]}export&nbsp;const&nbsp;StepWizard&nbsp;= (props:&nbsp;StepWizardProps)&nbsp;=&gt;&nbsp;{&nbsp; const { tracker = &#39;steps&#39;, orientation = &#39;horizontal&#39;, colorScheme = &#39;blue&#39;, steps } = props;&nbsp; const { activeStep, goToPrevious, goToNext } = useSteps({ index: 0, count: steps.length });&nbsp; return (&nbsp; &nbsp; &lt;Stack&nbsp;&nbsp; &nbsp; &nbsp; spacing={4}&nbsp;&nbsp; &nbsp; &nbsp; direction={orientation === &#39;vertical&#39; ? &#39;row&#39; : &#39;column&#39;}&nbsp;&nbsp; &nbsp; &gt;&nbsp; &nbsp; &nbsp; { tracker === &#39;steps&#39; &amp;&amp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;StepTracker&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steps={steps}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; active={activeStep}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orientation={orientation}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={orientation === &#39;vertical&#39; ? &#39;400px&#39; : undefined} // if vertical set a height value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colorScheme={colorScheme}&nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; { tracker === &#39;percent&#39; &amp;&amp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;PercentTracker&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; active={activeStep}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; total={steps.length}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colorScheme={colorScheme}&nbsp; &nbsp; &nbsp; &nbsp; /&gt;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &lt;VStack direction={&#39;column&#39;}&gt;&nbsp; &nbsp; &nbsp; &nbsp; { steps[activeStep] &amp;&amp; steps[activeStep].component}&nbsp; &nbsp; &nbsp; &nbsp; &lt;HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme={&#39;blue&#39;} variant=&#39;outline&#39; onClick={()=&gt;goToPrevious()}&gt;Prev&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme={&#39;blue&#39;} variant=&#39;outline&#39; onClick={()=&gt;goToNext()}&gt;Next&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/HStack&gt;&nbsp; &nbsp; &nbsp; &lt;/VStack&gt;&nbsp; &nbsp; &lt;/Stack&gt;&nbsp; )}</code></div> Now that we&#39;ve built our components lets test them out! Putting It All Together <a href="https://imgix.cosmicjs.com/3843a290-f02b-11ed-b7bd-57cb4c9665a9-sw5.png" rel="noopener noreferrer" target="_blank"><img src="https://imgix.cosmicjs.com/3843a290-f02b-11ed-b7bd-57cb4c9665a9-sw5.png" data-name="sw5.png" style="width: 594px;" class="fr-fic fr-dib"></a> <div class="code-block"><code>&quot;use client&quot;;import&nbsp;{&nbsp;StepWizard&nbsp;}&nbsp;from&nbsp;&quot;@/components/StepWizard&quot;;import&nbsp;{&nbsp;StepModel&nbsp;}&nbsp;from&nbsp;&quot;@/models/StepModel&quot;;import { Button, ChakraProvider, Container, HStack, VStack } from &quot;@chakra-ui/react&quot;;import&nbsp;{&nbsp;useState&nbsp;}&nbsp;from&nbsp;&quot;react&quot;; interface&nbsp;StepWizardDemoState&nbsp;{&nbsp; tracker: &#39;steps&#39; | &#39;percent&#39;,&nbsp; orientation: &#39;horizontal&#39; | &#39;vertical&#39;,&nbsp; colorScheme: &#39;red&#39; | &#39;orange&#39; | &#39;yellow&#39; | &#39;green&#39; | &#39;blue&#39;}export&nbsp;default&nbsp;function&nbsp;Home() {&nbsp; const steps: StepModel [] = [&nbsp; &nbsp; { title: &#39;First&#39;, description: &#39;Step 1&#39;, component: &lt;h1&gt;This is Step 1&lt;/h1&gt; },&nbsp; &nbsp; { title: &#39;Second&#39;, description: &#39;Step 2&#39;, component: &lt;h1&gt;This is Step 2&lt;/h1&gt; },&nbsp; &nbsp; { title: &#39;Third&#39;, description: &#39;Step 3&#39;, component: &lt;h1&gt;This is Step 3&lt;/h1&gt; },&nbsp; &nbsp; { title: &#39;Fourth&#39;, description: &#39;Step 4&#39;, component: &lt;h1&gt;This is Step 4&lt;/h1&gt; }&nbsp; ];&nbsp; const [state, setState] = useState&lt;StepWizardDemoState&gt;({&nbsp;&nbsp; &nbsp; tracker: &#39;steps&#39;,&nbsp;&nbsp; &nbsp; orientation: &#39;horizontal&#39;,&nbsp; &nbsp; colorScheme: &#39;blue&#39;&nbsp; });&nbsp; const setTracker = (tracker: &#39;steps&#39; | &#39;percent&#39;) =&gt; setState({&nbsp;&nbsp; &nbsp; ...state,&nbsp;&nbsp; &nbsp; tracker: tracker,&nbsp;&nbsp; &nbsp; orientation: &#39;horizontal&#39;&nbsp; });&nbsp; const setOrientation = (orientation: &#39;horizontal&#39; | &#39;vertical&#39;) =&gt; setState({&nbsp;&nbsp; &nbsp; ...state,&nbsp;&nbsp; &nbsp; tracker: &#39;steps&#39;,&nbsp;&nbsp; &nbsp; orientation: orientation&nbsp; });&nbsp; const setColorScheme = (colorScheme: &#39;red&#39; | &#39;orange&#39; | &#39;yellow&#39; | &#39;green&#39; | &#39;blue&#39;) =&gt; setState({&nbsp;&nbsp; &nbsp; ...state,&nbsp;&nbsp; &nbsp; colorScheme: colorScheme&nbsp; }); &nbsp; return (&nbsp; &nbsp; &lt;ChakraProvider&gt;&nbsp; &nbsp; &nbsp; &lt;Container maxW={&#39;6xl&#39;} &gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;VStack py={5} spacing={5}&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme={&#39;blue&#39;} variant=&#39;outline&#39; onClick={()=&gt;setTracker(&#39;steps&#39;)}&gt;Steps&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme={&#39;blue&#39;} variant=&#39;outline&#39; onClick={()=&gt;setTracker(&#39;percent&#39;)}&gt;Percent&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { state.tracker === &#39;steps&#39; &amp;&amp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme={&#39;blue&#39;} variant=&#39;outline&#39; onClick={()=&gt;setOrientation(&#39;vertical&#39;)}&gt;Vertical&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme={&#39;blue&#39;} variant=&#39;outline&#39; onClick={()=&gt;setOrientation(&#39;horizontal&#39;)}&gt;Horizontal&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme=&#39;red&#39; onClick={()=&gt;setColorScheme(&#39;red&#39;)}&gt;Red&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme=&#39;orange&#39; onClick={()=&gt;setColorScheme(&#39;orange&#39;)}&gt;Orange&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme=&#39;yellow&#39; onClick={()=&gt;setColorScheme(&#39;yellow&#39;)}&gt;Yellow&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme=&#39;green&#39; onClick={()=&gt;setColorScheme(&#39;green&#39;)}&gt;Green&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button colorScheme=&#39;blue&#39; onClick={()=&gt;setColorScheme(&#39;blue&#39;)}&gt;Blue&lt;/Button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/HStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/VStack&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;StepWizard steps={steps} tracker={state.tracker} orientation={state.orientation} colorScheme={state.colorScheme}/&gt;&nbsp; &nbsp; &nbsp; &lt;/Container&gt;&nbsp; &nbsp; &lt;/ChakraProvider&gt;&nbsp; );}</code></div>

Blog Posts

Creating a reusable Step Wizard with React and Chakra UI