OnboardingTour

Your workspace: Orbit

Ready for your next idea

Usage

import { OnboardingTour } from "@devvy-ui/react";

<OnboardingTour open={open} onOpenChange={setOpen} steps={[{id:'start',title:'Your workspace',description:'Create your first project.',targetId:'workspace'}]} />

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
steps	TourStep[]	required	Unique ids, titles, descriptions and optional targetId.
onComplete	() => void	—	Called on the last Finish action.
Dialog visibility props	open / onOpenChange	required	Controlled tour visibility.

Source ownership

Run npx @devvy-ui/cli init once in your React project, then add the source:

npx @devvy-ui/cli add onboarding-tour

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

OnboardingTour.tsxREACT / TSX

import { forwardRef, useEffect, useState } from 'react';
import { Dialog, type DialogProps } from './Dialog';
export interface TourStep {
  id: string;
  title: string;
  description: string;
  targetId?: string;
}
export interface OnboardingTourProps
  extends Omit<DialogProps, 'title' | 'description' | 'children'> {
  steps: readonly TourStep[];
  onComplete?: () => void;
}
export const OnboardingTour = forwardRef<HTMLDialogElement, OnboardingTourProps>(
  function OnboardingTour({ steps, onComplete, ...props }, ref) {
    const [index, setIndex] = useState(0),
      step = steps[Math.min(index, steps.length - 1)];
    useEffect(() => {
      if (!props.open) {
        setIndex(0);
        return;
      }
      const target = step?.targetId ? document.getElementById(step.targetId) : null;
      target?.classList.add('dvy-tour-target');
      target?.scrollIntoView({ block: 'center', behavior: 'auto' });
      return () => target?.classList.remove('dvy-tour-target');
    }, [props.open, step?.targetId]);
    if (!step) return null;
    return (
      <Dialog
        {...props}
        ref={ref}
        title={step.title}
        description={step.description}
        className={['dvy-tour', props.className].filter(Boolean).join(' ')}
      >
        <p role="status">
          Step {index + 1} of {steps.length}
        </p>
        <div className="dvy-dialog-actions">
          <button
            type="button"
            className="dvy-button"
            data-variant="outline"
            onClick={() => props.onOpenChange(false)}
          >
            Skip tour
          </button>
          <button
            type="button"
            className="dvy-button"
            data-variant="outline"
            disabled={index === 0}
            onClick={() => setIndex((i) => i - 1)}
          >
            Back
          </button>
          <button
            type="button"
            className="dvy-button"
            onClick={() => {
              if (index + 1 >= steps.length) {
                props.onOpenChange(false);
                onComplete?.();
              } else setIndex((i) => i + 1);
            }}
          >
            {index + 1 >= steps.length ? 'Finish' : 'Next'}
          </button>
        </div>
      </Dialog>
    );
  },
);

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Search DEVVY UI

Welcome to your workspace

Usage

API reference

Source ownership

Make the source yours.

OnboardingTour

Interactive preview

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.