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
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 containerRef1 = useRef(null);
const containerRef2 = useRef(null);
const containerRef3 = useRef(null);
const containerRef4 = useRef(null);
const containerRef5 = useRef(null);
return (
<MDBOnboarding
className='border p-4 d-flex justify-content-center mb-4'
backdrop
containerBackdrop
style={{ maxHeight: '120vh', overflowY: 'auto', scrollBehavior: 'smooth' }}
starter={containerRef1}
steps={[
{
ref: containerRef1,
content: 'Onboarding inside containers works similarly to standard Onboarding tour',
},
{
ref: containerRef2,
content: 'You can pause and resume each step. This one will close after 5 seconds',
autoplay: 5,
},
{
ref: containerRef3,
content: 'Auto scroll works too. It will even scroll window if container is bigger than it',
},
{
ref: containerRef4,
content: 'And custom buttons also works',
customization: {
nextBtn: <MDBIcon fas icon='arrow-right' style={{ pointerEvents: 'none' }} />,
},
},
{
ref: containerRef5,
content: (
<>
Thank you for Onboarding experience with{' '}
<img
src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
style={{ alignSelf: 'center' }}
/>
</>
),
},
]}
>
<MDBContainer>
<MDBRow className='justify-content-center'>
<MDBCol md='3' className='text-center'>
<MDBBtn className='btn btn-danger' ref={containerRef1}>
Watch Demo <i className='fas fa-eye'></i>
</MDBBtn>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className='my-4'>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbootstrap.com/img/Photos/Others/men.webp'
alt='Card image cap'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle>
<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>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbootstrap.com/img/Photos/Others/men.webp'
alt='Card image cap'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<div className='card-body text-center'>
<h4 className='card-title'>
<strong>Kate Smith</strong>
</h4>
<h6 className='fw-bold indigo-text py-2'>Graphic designer</h6>
<p className='card-text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</p>
<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>
</div>
</MDBCard>
</MDBCol>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbootstrap.com/img/Photos/Others/men.webp'
alt='Card image cap'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<MDBCardBody className='text-center'>
<MDBCardTitle>
<strong>Natalie Code</strong>
</MDBCardTitle>
<h6 className='fw-bold indigo-text py-2'>Backend 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>
<hr />
<h4 ref={containerRef3} className='text-center my-4'>
Gallery
</h4>
<MDBRow ref={containerRef4} className='my-3'>
<MDBCol md='4' className='mb-3'>
<img
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Vertical/mountain2.webp'
alt='Card image cap'
/>
</MDBCol>
<MDBCol md='4' className='mb-3'>
<img
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Vertical/mountain1.webp'
alt='Card image cap'
/>
</MDBCol>
<MDBCol md='4' className='mb-3'>
<img
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Vertical/mountain2.webp'
alt='Card image cap'
/>
</MDBCol>
</MDBRow>
<MDBRow className='my-3'>
<MDBCol md='4' ref={containerRef2} className='mb-3'>
<img
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Vertical/mountain3.webp'
alt='Card image cap'
/>
</MDBCol>
<div className='mb-3 col-md-4'>
<img
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Vertical/mountain1.webp'
alt='Card image cap'
/>
</div>
<div className='mb-3 col-md-4'>
<img
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Vertical/mountain3.webp'
alt='Card image cap'
/>
</div>
</MDBRow>
<MDBRow ref={containerRef5} className='my-4'>
<div className='col-md-4'>
<div className='card'>
<img
className='card-img-top'
src='https://mdbootstrap.com/img/Photos/Others/men.webp'
alt='Card image cap'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<div className='card-body text-center'>
<h4 className='card-title'>
<strong>John Doe</strong>
</h4>
<h6 className='fw-bold indigo-text py-2'>Web developer</h6>
<p className='card-text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</p>
<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>
</div>
</div>
</div>
<div className='col-md-4'>
<div className='card'>
<img
className='card-img-top'
src='https://mdbootstrap.com/img/Photos/Others/men.webp'
alt='Card image cap'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<div className='card-body text-center'>
<h4 className='card-title'>
<strong>Kate Smith</strong>
</h4>
<h6 className='fw-bold indigo-text py-2'>Graphic designer</h6>
<p className='card-text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</p>
<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>
</div>
</div>
</div>
<MDBCol md='4'>
<MDBCard>
<img
className='card-img-top'
src='https://mdbootstrap.com/img/Photos/Others/men.webp'
alt='Card image cap'
/>
<a>
<div className='mask rgba-white-slight'></div>
</a>
<div className='card-body text-center'>
<h4 className='card-title'>
<strong>Natalie Code</strong>
</h4>
<h6 className='fw-bold indigo-text py-2'>Backend developer</h6>
<p className='card-text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere
modi sunt, quod quibusdam.
</p>
<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>
</div>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBOnboarding>
);
}
Onboarding - API
Import
import { MDBOnboarding } from 'mdb-react-onboarding';
Properties
MDBOnboarding
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
string | '' |
Adds a custom class to MDBOnboarding |
<MDBOnboarding className='custom' />
|
backdrop
|
boolean | false |
Enables the backdrop |
<MDBOnboarding backdrop />
|
backdropOpacity
|
number | 0.6 |
Specifies the backdrop opacity value |
<MDBOnboarding backdropOpacity={0.8} />
|
starter
|
React.MutableRefObject<null> | number | - |
The reference to starter element or starting delay |
<MDBOnboarding starter={starterRef} />
|
steps
|
Array<StepObject> | - |
Array with steps properties |
<MDBOnboarding starter={starterRef} />
|
starterType
|
string | 'click' |
Starter event type |
<MDBOnboarding starterType='mouseover' />
|
Advanced types
StepObject
type StepObject = {
ref: React.MutableRefObject<null>;
content: React.ReactNode;
backdropOpacity?: number;
autoplay?: number;
customization?: {
prevBtn?: React.ReactNode;
nextBtn?: React.ReactNode;
pauseBtn?: React.ReactNode;
resumeBtn?: React.ReactNode;
closeBtn?: React.ReactNode;
};
}