React Joyride alternatives for React 19 (2026)

First, the upgrade path: React Joyride v3

License:

MIT

Version:

react-joyride 3.2.0

v3 is a substantial rewrite rather than a patch. Positioning moved from Popper/react-floater to Floating UI, the overlay is now an SVG cutout, steps gained async before hooks, targets can be refs or functions, and the tour polls for missing targets up to targetWaitTimeout before moving on. The hook API makes programmatic control much cleaner than v2's getHelpers.

"use client";
import { useJoyride } from "react-joyride";

const steps = [
  { target: "#new-project", content: "Everything starts here." },
  { target: "#invite", content: "Invite a teammate early." },
];

export function TourLauncher() {
  const { controls, Tour } = useJoyride({ steps, continuous: true });

  return (
    <>
      <button onClick={() => controls.start()}>Take the tour</button>
      {Tour}
    </>
  );
}

Driver.js — lightest, and not React-specific

License:

MIT

Version:

driver.js 1.9.0

Driver.js is the most-downloaded tour library on npm (about 22.4 million in the same 90 days) and the usual pick when the complaint is weight. It's MIT, has no dependencies, and runs from a useEffect. The trade-off is that steps are strings or HTML rather than React components, and the tour state lives outside React. We cover this match-up in depth in Driver.js vs React Joyride.

"use client";
import { useEffect } from "react";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

export function OnboardingTour() {
  useEffect(() => {
    const tour = driver({
      showProgress: true,
      steps: [
        { element: "#new-project", popover: { title: "Create a project", description: "Everything starts here." } },
        { element: "#invite", popover: { title: "Invite your team", description: "Tours work better with company." } },
      ],
    });
    tour.drive();
    return () => tour.destroy(); // safe: destroy() on an inactive tour is a no-op
  }, []);

  return null;
}

Reactour — the closest React-native swap ("react joyride vs react tour")

License:

MIT

Version:

@reactour/tour 3.8.0

When people search "react joyride vs react tour" they usually mean Reactour, published today as @reactour/tour (the old unscoped reactour package is the legacy v1, with React peers capped at 18). It's MIT, supports React 16–19, and uses a provider-plus-hook model: wrap the app in TourProvider, then open the tour from anywhere with useTour(). Focus is locked inside the popover with react-aria's FocusScope, keyboard navigation covers Esc and the arrow keys, and bundlephobia measures it at about 7.2 kB gzipped.

The caution is cadence: 3.8.0 shipped in May 2025 and there hasn't been a release since, although the GitHub repository shows activity in 2026. Fine for a stable tour; check the issue tracker before betting a complex one on it.

"use client";
import { TourProvider, useTour } from "@reactour/tour";

const steps = [
  { selector: "#new-project", content: "Everything starts here." },
  { selector: "#invite", content: "Tours work better with company." },
];

// Wrap your app once…
export function TourRoot({ children }: { children: React.ReactNode }) {
  return <TourProvider steps={steps}>{children}</TourProvider>;
}

// …and open the tour from anywhere below it.
export function StartTourButton() {
  const { setIsOpen } = useTour();
  return <button onClick={() => setIsOpen(true)}>Take the tour</button>;
}

NextStep and Onborda — route-aware tours for Next.js

License:

MIT

Version:

nextstepjs 2.3.0

Both are MIT and built for the App Router, and both solve the problem Joyride leaves to you: tours that cross pages. Each step can declare nextRoute and prevRoute, and the library navigates for you. NextStep (nextstepjs 2.3.0, July 2026) also ships adapters for React Router and Remix and requires the motion package. Onborda (1.2.5, December 2024) depends on framer-motion and Tailwind for its default card, and its README notes a fixed 500 ms delay after route changes. Both have grown fast: about 749k and 468k downloads respectively in the last 90 days.

Choose NextStep if you want the more actively released of the two; choose either only if you're on Next.js (or, for NextStep, one of its adapters).

// app/layout.tsx — npm i nextstepjs motion
import { NextStep, NextStepProvider, type Tour } from "nextstepjs";

const tours: Tour[] = [
  {
    tour: "welcome",
    steps: [
      {
        icon: null,
        title: "Create a project",
        content: "Everything starts here.",
        selector: "#new-project",
        side: "bottom",
        showControls: true,
        showSkip: true,
        nextRoute: "/settings", // the next step lives on another route
      },
      {
        icon: null,
        title: "Invite your team",
        content: "Tours work better with company.",
        selector: "#invite",
        side: "bottom",
        showControls: true,
        showSkip: true,
        prevRoute: "/",
      },
    ],
  },
];

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NextStepProvider>
          <NextStep steps={tours}>{children}</NextStep>
        </NextStepProvider>
      </body>
    </html>
  );
}

// Anywhere in a client component:
//   const { startNextStep } = useNextStep();
//   startNextStep("welcome");

react-shepherd — capable, but check the license ("react joyride vs shepherd")

License:

AGPL-3.0 + paid commercial

Version:

shepherd.js 15.3.0

Shepherd's React wrapper (react-shepherd 7.0.6, React 18–19) exposes the full Shepherd engine through a ShepherdJourneyProvider and useShepherd() hook. Technically it's a strong alternative. Commercially it isn't a drop-in for an MIT library: Shepherd and its wrappers are AGPL-3.0, and the license file requires a commercial license ($50 or $300 lifetime at the time of writing) for revenue-generating products and companies. If Joyride's MIT license was part of why you chose it, keep that in mind.