Onboarding
React 5 Onboarding plugin
Onboarding is a guide plugin to show users how to use your website
Responsive Onboarding plugin built with the latest Bootstrap 5. It is is a guide plugin to show users how to use your website.
Note: Read the API tab to find all available options and advanced customization
Basic example
To initialize Onboarding on your page simply use
MDBOnboarding component. Specify steps by passing the specific array.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const basicRef1 = useRef(null);
const basicRef2 = useRef(null);
const basicRef3 = useRef(null);
return (
<MDBOnboarding
starter={basicRef1}
steps={[
{
ref: basicRef1,
content: 'This button has just started your onboarding',
},
{
ref: basicRef2,
content: 'This is just basic example of initial onboarding options and configurations',
},
{
ref: basicRef3,
content: 'There is many more options in the examples below',
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md='3' className='text-center'>
<MDBBtn ref={basicRef1} color='danger'>
Start onboarding
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={basicRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Start options
Autostart
Onboarding can be auto initialized by passing number type value to starter property. The onboarding will start after the countdown.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const autoRef1 = useRef(null);
const autoRef2 = useRef(null);
const autoRef3 = useRef(null);
return (
<MDBOnboarding
starter={3}
steps={[
{
ref: autoRef1,
content: 'Example of autostarted onboarding experience',
},
{
ref: autoRef2,
content: 'Pass delay time in seconds to autostart onboarding',
},
{
ref: autoRef3,
content: 'Delay time will also work with other starting options',
},
]}
>
<MDBContainer>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
ref={autoRef1}
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={autoRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae.
Facere modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Event triggered start
Set starterType property to mouseenter to start on hover.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const hoverStarter = useRef(null);
const hoverRef1 = useRef(null);
const hoverRef2 = useRef(null);
return (
<MDBOnboarding
starter={hoverStarter}
starterType='mouseenter'
steps={[
{
ref: hoverRef1,
content: 'You can use events such as "click" or "mouseover"',
},
{
ref: hoverRef2,
content: 'You can even use "load" event on a window element!',
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md='3' className='text-center'>
<MDBBtn ref={hoverStarter} color='danger'>
Start onboarding
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
ref={hoverRef1}
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={hoverRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae.
Facere modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Backdrop options
Global backdrop
Backdrop for every step inside Onboarding can be set via
backdrop and backdropOpacity properties
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const backdropStarter = useRef(null);
const backdropRef1 = useRef(null);
const backdropRef2 = useRef(null);
const backdropRef3 = useRef(null);
return (
<MDBOnboarding
starter={backdropStarter}
backdrop
steps={[
{
ref: backdropRef1,
content: 'Backdrop is set to false by default',
},
{
ref: backdropRef2,
content: 'Backdrop options set in Onboarding container will be passed to each step element inside it',
},
{
ref: backdropRef3,
content:
'If you want to set global backdrop but turn it off for one step use options for individual step from the next example',
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md='3' className='text-center'>
<MDBBtn ref={backdropStarter} color='danger'>
Start onboarding
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
ref={backdropRef1}
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={backdropRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Individual step backdrop
Indivudal backdrop options can be set with steps array.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const backdropCustomStarter = useRef(null);
const backdropCustomRef1 = useRef(null);
const backdropCustomRef2 = useRef(null);
const backdropCustomRef3 = useRef(null);
return (
<MDBOnboarding
starter={backdropCustomStarter}
backdrop
steps={[
{
ref: backdropCustomRef1,
content:
'Individual step options have higher specificity than global. Setting backdrop to a single step will override its global backdrop options',
},
{
ref: backdropCustomRef2,
content: 'This element has backdrop with opacity 0.2',
backdropOpacity: 0.2,
},
{
ref: backdropCustomRef3,
content: 'And this element has backdrop with opacity 0.8',
backdropOpacity: 0.8,
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md='3' className='text-center'>
<MDBBtn ref={backdropCustomStarter} color='danger'>
Start onboarding
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
ref={backdropCustomRef1}
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={backdropCustomRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Autoplay
Add autoplay property in steps array to change the step after some time.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const autoplayRef1 = useRef(null);
const autoplayRef2 = useRef(null);
const autoplayRef3 = useRef(null);
const autoplayRef4 = useRef(null);
return (
<MDBOnboarding
starter={autoplayRef1}
steps={[
{ ref: autoplayRef1, content: 'This step has globally set duration for 2 seconds', autoplay: 2 },
{
ref: autoplayRef2,
content: 'This step has overriden duration with data-mdb-duration attribute set to 4 seconds',
autoplay: 4,
},
{
ref: autoplayRef3,
content: (
<>
This step has not set <code>autoplay</code>. Click next or use arrow to open next step
</>
),
},
{
ref: autoplayRef4,
content: 'This step will automatically close after 5 seconds',
autoplay: 5,
},
]}
>
<MDBContainer>
<div className='row justify-content-center'>
<div className='col-md-3 text-center'>
<MDBBtn ref={autoplayRef1} color='danger'>
Start onboarding
</MDBBtn>
</div>
</div>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={autoplayRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText ref={autoplayRef3}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Autoscroll
Toggle auto scrolling into element that is outside the view with
autoscroll property.
Scroll from this
... to that
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const autoscrollStarter = useRef(null);
const autoscrollRef1 = useRef(null);
const autoscrollRef2 = useRef(null);
return (
<MDBOnboarding
starter={autoscrollStarter}
steps={[
{ ref: autoscrollRef1, content: 'Autoscroll is set to true by default' },
{
ref: autoscrollRef2,
content: 'To disable it for single step use autoscroll={false} property on that element',
},
]}
backdrop
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md="3" className='text-center'>
<MDBBtn ref={autoscrollStarter} color='danger'>
Start onboarding
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBRow className='d-flex justify-content-center'>
<div style={{ marginBottom: '150vh' }} ref={autoscrollRef1}>
Scroll from this
</div>
<div ref={autoscrollRef2}>... to that</div>
</MDBRow>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Popover customization
Buttons and labels customization
You can change buttons styles and labels inside step popover via proper properties. For more info visit API section
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const customizationStarter = useRef(null);
const customizationRef1 = useRef(null);
const customizationRef2 = useRef(null);
const customizationRef3 = useRef(null);
const customizationRef4 = useRef(null);
return (
<MDBOnboarding
starter={customizationStarter}
backdrop
steps={[
{
ref: customizationRef1,
content: 'Globally changed button labels',
customization: {
prevBtn: 'left',
nextBtn: 'right',
closeBtn: 'end',
},
},
{
ref: customizationRef2,
content: 'Locally changed control labels',
autoplay: 5,
customization: {
prevBtn: 'left',
nextBtn: 'right',
closeBtn: 'end',
resumeBtn: 'START',
pauseBtn: 'STOP',
},
},
{
ref: customizationRef3,
content: 'You can even use our icons inside button labels!',
customization: {
prevBtn: <MDBIcon fas icon='arrow-left' style={{ pointerEvents: 'none' }} />,
nextBtn: <MDBIcon fas icon='arrow-right' style={{ pointerEvents: 'none' }} />,
closeBtn: 'end',
},
},
{
ref: customizationRef4,
content: 'And add different button classes!',
customization: {
prevBtn: <MDBIcon fas icon='arrow-left' style={{ pointerEvents: 'none' }} />,
nextBtn: <MDBIcon fas icon='arrow-right' style={{ pointerEvents: 'none' }} />,
closeBtn: <MDBIcon fas icon='times' style={{ pointerEvents: 'none' }} />,
},
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md="3" className='text-center'>
<MDBBtn ref={customizationStarter} color='danger'>
Start onboarding
</MDBBtn>
</div>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
ref={customizationRef1}
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={customizationRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText ref={autoplayRef3}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Popover class
Add custom class for popovers by setting
className property and style it in your css sheet.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBIcon,
} from 'mdb-react-ui-kit';
import { MDBOnboarding } from 'mdb-react-onboarding';
export default function App() {
const customRef1 = useRef(null);
const customRef2 = useRef(null);
const starterRef = useRef(null);
return (
<MDBOnboarding
starter={starterRef}
className="custom-popover"
steps={[
{
ref: basicRef1,
content: 'Border added with custom class',
},
{
ref: basicRef2,
content: 'Class change is set globally for all steps inside Onboarding container',
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md='3' className='text-center'>
<MDBBtn ref={starterRef} color='danger'>
Start onboarding
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp'
alt='Man in Cap and Glasses'
ref={customRef1}
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle ref={customRef2}>
<strong>John Doe</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</MDBCardText>
<div className='d-flex justify-content-evenly'>
<a href='#!' role='button'>
<MDBIcon fab icon="facebook-f" size="lg" />
</a>
<a href='#!' role='button'>
<MDBIcon fab icon="twitter" size="lg" />
</a>
<a href='#!' role='button' ref={basicRef3}>
<MDBIcon fab icon="dribbble" size="lg" />
</a>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
.custom-popover {
border: 2px solid red;
}
Container example
Gallery
