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.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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.

Onboarding will start in: 3

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Gallery

Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

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;
  };
}