OnboardingTour

Step-by-step spotlight walkthrough that highlights real DOM elements, via driver.js.

OnboardingTour drives a guided tour over your actual UI: each step targets a CSS selector and highlights that element with a popover and dimmed backdrop, built on driver.js. It renders no visible markup of its own — mount it anywhere and control it with run. Use it for first-run product tours or feature announcements that need to point at specific buttons or panels rather than show a generic modal.

Toggle run to true to start the tour; flipping it back to false tears it down. onClose fires when the user finishes or dismisses it.

Example

Preview

Tour primitive configured. Enable run in product flows.

import { OnboardingTour } from '@officina/ui';
import { useState } from 'react';

function ProductTour() {
  const [run, setRun] = useState(false);
  return (
    <>
      <button onClick={() => setRun(true)}>Show me around</button>
      <OnboardingTour
        run={run}
        onClose={() => setRun(false)}
        steps={[
          {
            element: '#sidebar',
            popover: { title: 'Navigation', description: 'Switch workspaces here.' },
          },
          {
            element: '#invite-button',
            popover: { title: 'Invite teammates', description: 'Add people to your team.' },
          },
        ]}
      />
    </>
  );
}

API

Prop	Type	Default	Description
steps*	DriveStep[]	—	Ordered tour steps, each targeting an element with content.
onClose	() => void	—	Called when the tour is closed or completed.
options	Config	—	Driver.js config overrides (animation, labels, behavior).
run	boolean	true	Start the tour when true; stops/resets when false.

Example

API

On this page