Stepper
React Bootstrap 5 Stepper / Wizard component
Responsive stepper built with Bootstrap 5. Form wizard, vertical stepper, multi step form validation, optional step, mobile stepper & more.
Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.
In this documentation, you can find examples of form wizard, vertical stepper, horizontal stepper, multi step form, mobile stepper, validation & more.
Note: Read the API tab to find all available options and advanced customization
Basic example
You can automatically initialize the stepper component using
MDBStepper.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
</MDBStepper>
);
}
Change steps using external elements
To go to the next or previous step, you can use the reference to the buttons.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React, { useRef } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBBtn
} from 'mdb-react-ui-kit';
export default function App() {
const prevRef = useRef(null);
const nextRef = useRef(null);
return (
<div className='w-100'>
<div className='mb-3'>
<MDBBtn ref={prevRef}>PREV</MDBBtn>
<MDBBtn ref={nextRef}>NEXT</MDBBtn>
</div>
<div>
<MDBStepper disableHeadSteps externalNext={nextRef} externalPrev={prevRef}>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur
</MDBStepperStep>
</MDBStepper>
</div>
</div>
);
}
Linear stepper
If you want to use basic validation before proceeding to the next step you can set
linear property.
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperForm,
MDBInput,
MDBValidationItem,
MDBBtn
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper
linear
>
<MDBStepperForm>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput label='step 1' required />
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput label='step 2' required />
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput wrapperClass='mb-4' label='step 3' required />
<MDBBtn type='submit'>submit</MDBBtn>
</MDBValidationItem>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
);
}
No editable stepper
You can set noEditable property to prevent you from editing the
completed step again.
-
step1
-
step2
-
step3
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBInput,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper noEditable>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
<MDBInput label='step 1' />
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
<MDBInput label='step 2' />
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
<MDBInput label='step 3' />
</MDBStepperStep>
</MDBStepper>
);
}
Vertical stepper
Set type='vertical' to use the vertical view.
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultriciesUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper type='vertical'>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
dolore magna aliqua
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
consequat
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</MDBStepperStep>
</MDBStepper>
);
}
Mobile stepper
Set type='mobile' to use mobile view.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper type='mobile'>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
</MDBStepper>
);
}
Mobile stepper progress bar
if the stepper contains more than 4 steps, the progress bar will be displayed by default
instead of dots. You can edit the step limit with the
mobileProgress property.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper mobile mobileProgress>
<MDBStepperStep itemId={1} icon='1' text='step1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua
</MDBStepperStep>
<MDBStepperStep itemId={2} icon='2' text='step2'>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperStep>
<MDBStepperStep itemId={3} icon='3' text='step3'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={4} icon='4' text='step4'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={5} icon='5' text='step5'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={6} icon='6' text='step6'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={7} icon='7' text='step7'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={8} icon='8' text='step8'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={9} icon='9' text='step9'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={10} icon='10' text='step10'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={11} icon='11' text='step11'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
<MDBStepperStep itemId={12} icon='12' text='step12'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperStep>
</MDBStepper>
);
}
Custom icons
if you want to use an icon instead of a step number you can do it by setting
MDBStepperHead icon property.
-
step1
-
step2
-
step3
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBInput,
MDBIcon,
MDBSpinner
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper>
<MDBStepperStep headIcon={<MDBIcon fas icon='user' />} headText='step 1' itemId={1}>
<MDBInput label='step 1' />
</MDBStepperStep>
<MDBStepperStep headIcon={<MDBIcon fas icon='envelope' />} headText='step 2' itemId={2}>
<MDBInput label='step 2' />
</MDBStepperStep>
<MDBStepperStep headIcon={<MDBSpinner size='sm' />} headText='step 3' itemId={3}>
<MDBInput label='step 3' />
</MDBStepperStep>
</MDBStepper>
);
}
Form wizard
An example of so-called "Form wizard" with multiple inputs on each step.
import React, { useState, useEffect, useRef } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperForm,
MDBInput,
MDBCheckbox,
MDBBtn,
MDBValidationItem,
MDBTextArea
} from 'mdb-react-ui-kit';
export default function App() {
const wizardNextRef = useRef(null);
const wizardPrevRef = useRef(null);
const [wizardRefs, setWizardRefs] = useState<{
prev: React.MutableRefObject<any> | null;
next: React.MutableRefObject<any> | null;
}>({ prev: null, next: null });
useEffect(() => {
setWizardRefs({ prev: wizardPrevRef, next: wizardNextRef });
}, [wizardNextRef, wizardPrevRef]);
return (
<>
<MDBStepper externalNext={wizardRefs.next} externalPrev={wizardRefs.prev} linear>
<MDBStepperForm>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
label={
<>
First name <small className='text-muted'>(required)</small>
</>
}
required
/>
</MDBValidationItem>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
label={
<>
Last name <small className='text-muted'>(required)</small>
</>
}
required
/>
</MDBValidationItem>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
label={
<>
Nickname <small className='text-muted'>(required)</small>
</>
}
required
/>
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
label={
<>
Company name <small className='text-muted'>(required)</small>
</>
}
required
/>
</MDBValidationItem>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
label={
<>
Address <small className='text-muted'>(required)</small>
</>
}
required
/>
</MDBValidationItem>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
type='email'
label={
<>
Email <small className='text-muted'>(required)</small>
</>
}
required
/>
</MDBValidationItem>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput
wrapperClass='mb-4'
type='number'
label={
<>
Phone <small className='text-muted'>(optional)</small>
</>
}
/>
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
<MDBValidationItem invalid feedback='invalid'>
<MDBTextArea rows={4} wrapperClass='mb-4' label='Additional information' required />
</MDBValidationItem>
<MDBValidationItem feedback=''>
<MDBCheckbox
wrapperClass='d-flex justify-content-center mb-4'
label='Create an account?'
required
/>
</MDBValidationItem>
<MDBBtn type='submit' block color='success' className='mb-4'>
Place order
</MDBBtn>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
<MDBBtn className='w-50' ref={wizardPrevRef}>
previous step
</MDBBtn>
<MDBBtn className='w-50' ref={wizardNextRef}>
next step
</MDBBtn>
</>
);
}
Toggle to vertical or mobile on smaller screens
Change the stepper mode depending on window width.
-
step1
-
step2
-
step3
import React, { useState, useEffect, useCallback } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBInput,
MDBIcon,
MDBSpinner
} from 'mdb-react-ui-kit';
export default function App() {
const [mode, setMode] = useState<'horizontal' | 'vertical' | 'mobile'>('horizontal');
const handleResize = useCallback(() => {
const width = window.innerWidth;
if (width > 768) {
setMode('horizontal');
} else if (width <= 768 && width > 400) {
setMode('vertical');
} else {
setMode('mobile');
}
}, []);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
return (
<MDBStepper type={mode}>
<MDBStepperStep headIcon={<MDBIcon fas icon='user' />} headText='step 1' itemId={1}>
<MDBInput label='step 1' />
</MDBStepperStep>
<MDBStepperStep headIcon={<MDBIcon fas icon='envelope' />} headText='step 2' itemId={2}>
<MDBInput label='step 2' />
</MDBStepperStep>
<MDBStepperStep headIcon={<MDBSpinner size='sm' />} headText='step 3' itemId={3}>
<MDBInput label='step 3' />
</MDBStepperStep>
</MDBStepper>
);
}
Events
Stepper emits events after successful step validation, after failed step validation, and before changing to another step. Check the browser console and try to change the step to see the result.
-
step1
-
step2
-
step3
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBValidationItem,
MDBInput,
MDBStepperForm,
MDBBtn
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper
onValid={(id) => console.log('onValid')}
onInvalid={(id) => console.log('onInvalid')}
onChange={(id) => console.log('onChangeStep')}
linear
>
<MDBStepperForm>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput label='step 1' required />
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput label='step 2' required />
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput wrapperClass='mb-4' label='step 3' required />
<MDBBtn type='submit'>submit</MDBBtn>
</MDBValidationItem>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
);
}
Add custom validation
You can use the customValidation method with MDBStepperStep component to use your own validation.
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBValidationItem,
MDBBtn,
MDBInput,
MDBStepperForm
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper linear>
<MDBStepperForm>
<MDBStepperStep
customValidation={(input: HTMLInputElement) => {
const inputLenght = input.value.length;
if (inputLenght < 5) {
input.setCustomValidity('Invalid');
} else {
input.setCustomValidity('');
}
return inputLenght >= 5;
}}
headIcon={1}
headText='step 1'
itemId={1}
>
<MDBValidationItem invalid feedback='password must have 5 sings'>
<MDBInput type='password' label='step 1' required />
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput label='step 2' required />
</MDBValidationItem>
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
<MDBValidationItem invalid feedback='invalid'>
<MDBInput wrapperClass='mb-4' label='step 3' required />
<MDBBtn type='submit'>submit</MDBBtn>
</MDBValidationItem>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
);
}
Stepper - API
Import
import {
MDBStepper,
MDBStepperStep,
MDBStepperForm,
} from 'mdb-react-ui-kit';
Properties
MDBStepper
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
defaultStep
|
number | 1 |
Change default step of the stepper. |
<MDBStepper defaultStep={3} />
|
disableHeadSteps
|
boolean | false |
Disable stepper head onClick change. |
<MDBStepper disableHeadSteps />
|
externalNext
|
React.MutableRefObject | null |
Reference to the external element, to change the stepper step to the next. |
<MDBStepper externalNext={nextRef} />
|
externalPrev
|
React.MutableRefObject | null |
Reference to the external element, to change the stepper step to the previous. |
<MDBStepper externalPrev={prevRef} />
|
linear
|
boolean | false |
Set to true to use the linear stepper |
<MDBStepper linear />
|
mobileOfLabel
|
React.ReactNode | 'of' |
Set custom of value in the mobile stepper head. |
<MDBStepper mobileOfLabel='at' />
|
mobileStepLabel
|
React.ReactNode | 'step' |
Set custom step value in the mobile stepper head. |
<MDBStepper mobileStepLabel='element' />
|
mobileBackLabel
|
React.ReactNode | 'BACK' |
Set custom text for BACK button. |
<MDBStepper mobileBackLabel='PREV' />
|
mobileNextLabel
|
React.ReactNode | 'NEXT' |
Set custom text for NEXT button. |
<MDBStepper mobileNextLabel='NXT' />
|
mobileProgress
|
boolean | false |
Enable mobile progress stepper. |
<MDBStepper type='mobile' mobileProgress />
|
noEditable
|
boolean | false |
Set to true to block editing of the completed step. |
<MDBStepper noEditable />
|
type
|
'horizontal' | 'vertical' | 'mobile' | 'horizontal' |
Set the stepper view |
<MDBStepper type='vertical' />
|
MDBStepperStep
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
contentClassName
|
string | '' |
Add custom classes to content element. |
<MDBStepperStep contentClassName="class" />
|
contentStyle
|
React.CSSProperties | - |
Add custom styles to content element. |
<MDBStepperStep contentStyle={customStyles} />
|
itemId
|
number | - |
Set the step unique id. |
<MDBStepperStep itemId={1} />
|
headClassName
|
string | '' |
Add custom classes to head element. |
<MDBStepperStep headClassName="class" />
|
headStyle
|
React.CSSProperties | - |
Add custom styles to head element. |
<MDBStepperStep headStyle={customStyles} />
|
headIcon
|
React.ReactNode | '0' |
Set step head icon. |
<MDBStepperStep headIcon='6' />
|
headText
|
React.ReactNode | 'none' |
Set step head text. |
<MDBStepperStep headText='step element' />
|
MDBStepperForm
For MDBStepperForm propeties check the
MDBValidation properties.
Methods
MDBStepperStep
| Name | Type | Description |
|---|---|---|
customValidation
|
(input: HTMLInputElement) => boolean | Apply custom validation to the step. |
Events
MDBStepper
| Name | Type | Description |
|---|---|---|
onChange
|
(id: number) => void | Event emitted before the step change. |
onInvalid
|
(id: number) => void | Event emitted after unsuccessful step validation. |
onValid
|
(id: number) => void | Event emitted after successful step validation. |
CSS variables
As part of MDB’s evolving CSS variables approach, stepper now use local CSS variables on
.stepper for enhanced real-time customization. Values for the CSS variables are
set via Sass, so Sass customization is still supported, too.
// .steps
--#{$prefix}steps-transition: #{$steps-transition};
// .steps-step
--#{$prefix}steps-step-after-left: #{$steps-step-after-left};
--#{$prefix}steps-step-after-width: #{$steps-step-after-width};
--#{$prefix}steps-step-after-margin-top: #{$steps-step-after-margin-top};
--#{$prefix}steps-step-after-bg: #{$steps-step-after-bg};
// .steps-content
--#{$prefix}steps-content-padding-y: #{$steps-content-padding-y};
// .steps-head-vertical
--#{$prefix}steps-head-vertical-padding-top: #{$steps-head-vertical-padding-top};
--#{$prefix}steps-head-vertical-padding-x: #{$steps-head-vertical-padding-x};
// .steps-head-icon-vertical
--#{$prefix}steps-head-icon-vertical-margin-right: #{$steps-head-icon-vertical-margin-right};
// .steps-head
--#{$prefix}steps-head-line-height: #{$steps-head-line-height};
--#{$prefix}steps-head-hover-bgc: #{$steps-head-hover-bgc};
// .steps-head-text
--#{$prefix}steps-head-text-color: #{$steps-head-text-color};
--#{$prefix}steps-head-text-after-font-size: #{$steps-head-text-after-font-size};
// .steps-head-icon
--#{$prefix}steps-head-icon-font-size: #{$steps-head-icon-font-size};
--#{$prefix}steps-head-icon-width: #{$steps-head-icon-width};
--#{$prefix}steps-head-icon-height: #{$steps-head-icon-height};
--#{$prefix}steps-head-icon-font-weight: #{$steps-head-icon-font-weight};
// .steps-active-head-text
--#{$prefix}steps-active-head-text-font-weight: #{$steps-active-head-text-font-weight};
// .stepper
--#{$prefix}stepper-padding-x: #{$stepper-padding-x};
--#{$prefix}stepper-step-height: #{$stepper-step-height};
--#{$prefix}stepper-step-head-padding-left: #{$stepper-step-head-padding-left};
--#{$prefix}stepper-step-head-padding-right: #{$stepper-step-head-padding-right};
--#{$prefix}stepper-step-head-height: #{$stepper-step-head-height};
--#{$prefix}stepper-step-head-bg: #{$stepper-step-head-bg};
--#{$prefix}stepper-step-head-margin-right: #{$stepper-step-head-margin-right};
--#{$prefix}stepper-step-head-margin-left: #{$stepper-step-head-margin-left};
--#{$prefix}stepper-head-icon-margin-y: #{$stepper-head-icon-margin-y};
--#{$prefix}stepper-head-icon-margin-right: #{$stepper-head-icon-margin-right};
--#{$prefix}stepper-vertical-step-top: #{$stepper-vertical-step-top};
--#{$prefix}stepper-vertical-step-height: #{$stepper-vertical-step-height};
--#{$prefix}stepper-vertical-content-padding-left: #{$stepper-vertical-content-padding-left};
--#{$prefix}stepper-vertical-content-transition: #{$stepper-vertical-content-transition};
--#{$prefix}stepper-vertical-head-padding-bottom: #{$stepper-vertical-head-padding-bottom};
--#{$prefix}stepper-mobile-step-margin-y: #{$stepper-mobile-step-margin-y};
--#{$prefix}stepper-mobile-step-head-padding-x: #{$stepper-mobile-step-head-padding-x};
--#{$prefix}stepper-mobile-head-icon-height: #{$stepper-mobile-head-icon-height};
--#{$prefix}stepper-mobile-head-icon-width: #{$stepper-mobile-head-icon-width};
--#{$prefix}stepper-mobile-content-top: #{$stepper-mobile-content-top};
--#{$prefix}stepper-mobile-active-head-icon-bg: #{$stepper-mobile-active-head-icon-bg};
--#{$prefix}stepper-mobile-completed-head-icon-bg: #{$stepper-mobile-completed-head-icon-bg};
--#{$prefix}stepper-head-icon-bg: #{$stepper-head-icon-bg};
--#{$prefix}stepper-head-icon-color: #{$stepper-head-icon-color};
--#{$prefix}stepper-completed-head-icon-bg: #{$stepper-completed-head-icon-bg};
--#{$prefix}stepper-completed-head-icon-color: #{$stepper-completed-head-icon-color};
--#{$prefix}stepper-active-head-icon-bg: #{$stepper-active-head-icon-bg};
--#{$prefix}stepper-active-head-icon-color: #{$stepper-active-head-icon-color};
--#{$prefix}stepper-invalid-head-icon-bg: #{$stepper-invalid-head-icon-bg};
--#{$prefix}stepper-invalid-head-icon-color: #{$stepper-invalid-head-icon-color};
--#{$prefix}stepper-disabled-head-color: #{$stepper-disabled-head-color};
--#{$prefix}stepper-disabled-head-icon-bg: #{$stepper-disabled-head-icon-bg};
--#{$prefix}stepper-disabled-head-icon-color: #{$stepper-disabled-head-icon-color};
--#{$prefix}stepper-mobile-head-padding-y: #{$stepper-mobile-head-padding-y};
--#{$prefix}stepper-mobile-head-padding-x: #{$stepper-mobile-head-padding-x};
--#{$prefix}stepper-mobile-footer-height: #{$stepper-mobile-footer-height};
--#{$prefix}stepper-back-btn-i-margin-right: #{$stepper-back-btn-i-margin-right};
--#{$prefix}stepper-next-btn-i-margin-left: #{$stepper-next-btn-i-margin-left};
--#{$prefix}stepper-mobile-progress-bar-height: #{$stepper-mobile-progress-bar-height};
--#{$prefix}stepper-mobile-progress-height: #{$stepper-mobile-progress-height};
--#{$prefix}stepper-mobile-progress-background-color: #{$stepper-mobile-progress-background-color};
SCSS variables
// Steps
$steps-transition: height 0.2s ease-in-out;
$steps-step-after-left: 2.45rem;
$steps-step-after-width: 1px;
$steps-step-after-margin-top: 0.5rem;
$steps-step-after-bg: #dfdfdf;
$steps-content-padding-y: 1.5rem;
$steps-head-vertical-padding-top: 1.5rem;
$steps-head-vertical-padding-x: 1.5rem;
$steps-head-icon-vertical-margin-right: 0.75rem;
$steps-head-line-height: 1.3;
$steps-head-hover-bgc: rgba(0, 0, 0, 0.025);
$steps-head-text-color: $text-muted;
$steps-head-text-after-font-size: 0.8rem;
$steps-head-icon-font-size: 0.875rem;
$steps-head-icon-width: 1.938rem;
$steps-head-icon-height: 1.938rem;
$steps-head-icon-font-weight: 500;
$steps-active-head-text-font-weight: 500;
// Stepper
$stepper-padding-x: 1rem;
$stepper-step-height: 4.5rem;
$stepper-step-head-padding-left: 1.5rem;
$stepper-step-head-padding-right: 1.5rem;
$stepper-step-head-height: 1px;
$stepper-step-head-bg: rgba(0, 0, 0, 0.1);
$stepper-step-head-margin-right: 0.5rem;
$stepper-step-head-margin-left: 0.5rem;
$stepper-head-icon-margin-y: 1.5rem;
$stepper-head-icon-margin-right: 0.5rem;
$stepper-vertical-step-top: 3.25rem;
$stepper-vertical-step-height: calc(100% - 2.45rem);
$stepper-vertical-content-padding-left: 3.75rem;
$stepper-vertical-content-transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out,
margin-bottom 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
$stepper-vertical-head-padding-bottom: 1.5rem;
$stepper-mobile-step-margin-y: 1rem;
$stepper-mobile-step-head-padding-x: 0.25rem;
$stepper-mobile-head-icon-height: 0.5rem;
$stepper-mobile-head-icon-width: 0.5rem;
$stepper-mobile-content-top: 2.56rem;
$stepper-mobile-active-head-icon-bg: rgb(55, 111, 200);
$stepper-mobile-completed-head-icon-bg: rgb(19, 150, 71);
$stepper-head-icon-bg: rgb(235, 237, 239);
$stepper-head-icon-color: rgb(64, 70, 79);
$stepper-completed-head-icon-bg: rgb(214, 240, 224);
$stepper-completed-head-icon-color: rgb(13, 104, 50);
$stepper-active-head-icon-bg: rgb(223, 231, 246);
$stepper-active-head-icon-color: rgb(44, 88, 160);
$stepper-invalid-head-icon-bg: rgb(249, 225, 229);
$stepper-invalid-head-icon-color: rgb(175, 35, 58);
$stepper-disabled-head-color: #808080;
$stepper-disabled-head-icon-bg: #e6e6e6;
$stepper-disabled-head-icon-color: #808080;
$stepper-mobile-head-padding-y: 0.5rem;
$stepper-mobile-head-padding-x: 1rem;
$stepper-mobile-footer-height: 2.5rem;
$stepper-back-btn-i-margin-right: 0.5rem;
$stepper-next-btn-i-margin-left: 0.5rem;
$stepper-mobile-progress-bar-height: 0.3rem;
$stepper-mobile-progress-height: 0.3rem;
$stepper-mobile-progress-background-color: $gray-300;