5 best alternatives to building onboarding in-house

Building onboarding in-house sounds reasonable until you do the math. A conservative estimate puts year-one cost at $70,784, split between $45,018 in upfront development and $25,766 in annual maintenance (Appcues, 2026). That's before you tackle WCAG compliance, analytics, or the iteration tax of every copy change requiring an engineer. We tested five alternatives that get you further for less.

Disclosure: we built Tour Kit, so take our #1 ranking with appropriate skepticism. Every claim below is verifiable against npm, GitHub, and bundlephobia.

npm install @tourkit/core @tourkit/react

How we evaluated these tools

We installed each library in a Vite 6 + React 19 + TypeScript 5.7 project and built the same 5-step onboarding tour. Then we measured what matters: bundle size impact (gzipped, via bundlephobia), TypeScript support, accessibility compliance, maintenance activity, and iteration speed.

Criteria that weighted heaviest:

• Bundle size: every kilobyte costs mobile users real seconds
• Accessibility: WCAG 2.1 AA isn't optional, it's a legal requirement in the EU, UK, and increasingly the US
• Iteration speed: how fast can a non-engineer change tour copy or reorder steps?
• Maintenance health: last npm publish date, open issue count, React 19 compatibility
• Total cost of ownership: license fees, vendor lock-in risk, engineering hours over 12 months

We didn't test SaaS platforms that require vendor contracts and per-MAU pricing. If you want that comparison, see our in-app guidance tools roundup.

Quick comparison

1. Tour Kit: best for teams with a design system

Tour Kit is a headless onboarding library for React that ships logic without prescribing UI. The core package weighs under 8KB gzipped with zero runtime dependencies. You render steps with your own components (Radix primitives, shadcn/ui, Tailwind classes, whatever your team already uses). WCAG 2.1 AA compliance is built in: focus trapping, ARIA roles, keyboard navigation, and prefers-reduced-motion support all ship by default.

Strengths

• Headless architecture means your tours match your design system exactly, with no CSS overrides and no !important hacks
• 10 composable packages: install @tourkit/core and @tourkit/react for tours, then add @tourkit/analytics or @tourkit/surveys only when you need them
• TypeScript strict mode with full type exports, so your IDE catches tour configuration errors at build time
• MIT license, $99 one-time for Pro features (no per-seat, no MAU pricing)

Limitations

• No visual builder. Your product team can't edit tours without a developer writing JSX
• Smaller community than React Joyride or Shepherd.js (younger project)
• React 18+ only, with no support for older React versions or non-React frameworks
• You write more JSX upfront compared to opinionated libraries

Pricing

Free (MIT) for core packages. Pro features (adoption tracking, surveys, scheduling) cost $99 one-time per project.

Best for

React teams running shadcn/ui, Radix, or a custom design system who want code ownership without the maintenance burden of building from scratch.

// src/components/OnboardingTour.tsx
import { TourProvider, useTour } from '@tourkit/react';

const steps = [
  { id: 'welcome', target: '#dashboard', content: 'Welcome to your dashboard' },
  { id: 'sidebar', target: '#nav-menu', content: 'Navigate between sections here' },
  { id: 'create', target: '#new-project', content: 'Create your first project' },
];

function TourContent() {
  const { currentStep, next, prev, isActive } = useTour();
  if (!isActive) return null;

  return (
    <div role="dialog" aria-label="Onboarding tour">
      <p>{currentStep?.content}</p>
      <button onClick={prev}>Back</button>
      <button onClick={next}>Next</button>
    </div>
  );
}

export function OnboardingTour({ children }: { children: React.ReactNode }) {
  return (
    <TourProvider steps={steps}>
      {children}
      <TourContent />
    </TourProvider>
  );
}

2. React Joyride: best for getting a tour running fast

React Joyride is the most downloaded product tour library in the React ecosystem, with 340,000+ weekly npm downloads and 5,100+ GitHub stars as of April 2026 (npm). It ships a complete UI out of the box (tooltips, overlays, beacons, progress indicators) so you can have a working tour in under 30 minutes. The tradeoff: that pre-built UI ships at ~37KB gzipped, and customizing it to match your design system means fighting CSS specificity.

Strengths

• Massive adoption: 340K+ weekly downloads means edge cases are well-documented on Stack Overflow and GitHub Issues
• Declarative API with callback system for tracking step completion and user behavior
• Active maintenance with regular releases, React 19 compatible
• Solid documentation with plenty of community examples

Limitations

• 37KB gzipped is 4.6x larger than Tour Kit's core, which is noticeable on mobile connections
• Customizing the tooltip UI requires overriding internal component styles, which breaks on version updates
• Accessibility coverage is partial: basic ARIA attributes exist, but focus management and keyboard navigation need manual work
• Inline styles make design system integration painful for teams using Tailwind or CSS-in-JS

Pricing

Free. MIT license.

Best for

Teams that need a working tour today and don't have strict design system requirements. If your timeline is "ship something this sprint" and pixel-perfect styling isn't critical, React Joyride gets the job done.

3. Shepherd.js: best for multi-framework teams

Shepherd.js takes a framework-agnostic approach. The core is vanilla JavaScript with official wrappers for React, Vue, Angular, and Ember. At ~25KB gzipped and 12,000+ GitHub stars, it's the most popular option for teams that don't want to lock their onboarding to a single framework. Keyboard navigation support exists out of the box, which puts it ahead of most competitors on accessibility (LogRocket, 2025).

Strengths

• Framework-agnostic core means one library works across your entire stack, from React dashboards to Vue marketing sites to Angular admin panels
• Built-in keyboard navigation for step traversal
• Tether-based positioning handles scroll and resize edge cases well
• Active community with 12K+ GitHub stars

Limitations

• The React wrapper adds an abstraction layer because you're calling Shepherd's API through React bindings rather than using native React patterns
• Default UI requires CSS customization to match modern design systems
• No built-in analytics or event tracking, so you'll need to wire that up yourself
• Bundle includes Popper.js dependency, which adds weight if you're already using Floating UI or Radix's positioning

Pricing

Free. MIT license.

Best for

Engineering teams maintaining apps across multiple frameworks who want a single onboarding library for their entire stack. Also a strong choice for Vue or Angular teams who can't use React-only libraries.

4. Driver.js: best for simple element highlighting

Driver.js is the lightweight option at ~5KB gzipped. No framework dependency, no build step required. Add a script tag and go. It does one thing well: highlighting elements on a page and walking users through them in sequence. When we tested it, setup took about 10 minutes (Chameleon, 2026).

Strengths

• 5KB gzipped, the smallest option on this list by a wide margin
• Zero framework dependency. Works with any JavaScript project
• Clean, minimal API that's hard to misuse
• Smooth highlighting animations with configurable overlay options

Limitations

• No React integration, so you manage lifecycle and state yourself (gets messy in component-based architectures)
• No accessibility support: missing ARIA roles, focus management, and keyboard navigation
• Limited step types with highlighting and popover text only
• No built-in persistence. Refreshing the page loses tour progress

Pricing

Free. MIT license.

Best for

Simple marketing pages or documentation sites where you need to highlight 3-5 elements without adding a build dependency. Not the right tool for complex onboarding flows in React apps.

5. Onborda: best for Next.js App Router projects

Onborda is purpose-built for Next.js App Router. It understands route transitions, handles server component boundaries, and supports Framer Motion animations natively. For teams already on Next.js 14+, the integration feels natural because Onborda follows App Router conventions rather than fighting them. As of April 2026, it's newer and smaller than the other libraries here, and the community is still growing.

Strengths

• Route-aware onboarding: tours survive page transitions in Next.js App Router without manual state management
• First-class TypeScript support with step type definitions
• Framer Motion integration for polished step transitions
• Modern codebase targeting Next.js 14+ and React 19

Limitations

• Next.js only. If you're on Vite, Remix, or vanilla React, it won't work
• Smaller community means fewer Stack Overflow answers and community examples
• Accessibility implementation is partial: basic ARIA exists but focus trapping needs manual setup
• No analytics or checklists beyond core tour functionality

Pricing

Free. MIT license.

Best for

Next.js App Router projects where route-aware onboarding is a hard requirement. If your entire frontend is Next.js and you want tours that handle router.push() transitions cleanly, Onborda fits.

Why we skipped Intro.js

Intro.js is popular in search results but uses an AGPL v3 license. If you're building proprietary SaaS, AGPL requires you to release your source code or buy a commercial license. Many legal teams reject AGPL outright. We only listed MIT-licensed alternatives to avoid that landmine.

The real cost of building in-house

Before you dismiss these libraries and reach for useState and createPortal, here's what the "I'll just build it myself" path actually looks like:

Month 1-2: Initial build (~$45K) Tooltip positioning that handles scroll, resize, and dynamic content. Overlay with cutout highlighting. Step sequencing with forward/back/skip logic.

Then the hard parts: focus trapping, keyboard navigation, screen reader announcements, persistence across sessions, mobile responsiveness.

Month 3-12: The iteration tax (~$26K/year) Every copy change needs an engineer. Every step reorder needs an engineer. Product wants analytics, so you bolt on event tracking. Legal wants WCAG compliance, which means auditing every component.

Then QA finds a z-index conflict with your modal library. Chrome 130 changes scroll behavior and breaks your positioning.

AdRoll's growth team put it bluntly: "Creating modals take, like, 15 minutes rather than a few days" after switching from in-house to a dedicated tool (Appcues).

The iteration tax is what kills in-house solutions. Building v1 is fun. But maintaining versions 2 through 20 while your product evolves underneath? That's where the real cost lives.

How to choose the right alternative

Tour Kit fits React teams with a design system (shadcn/ui, Radix, or custom) who want full code ownership without building positioning and accessibility from scratch.

React Joyride is the right pick when you need a working tour this week and don't mind the default tooltip UI. Battle-tested, largest community.

Shepherd.js makes sense if your stack spans multiple frameworks and you want one onboarding library that works everywhere.

For simple element highlighting on a static page, Driver.js gives you the smallest possible bundle at 5KB.

Onborda is the answer for Next.js App Router projects that need tours surviving route transitions natively.

And if onboarding is your core product differentiator (you're building an onboarding platform, not adding onboarding to your platform), building in-house with dedicated engineering bandwidth is still a valid path.

FAQ

Is it worth building a product tour from scratch?

Building a product tour from scratch costs approximately $45,018 in upfront development and $25,766 per year in maintenance, according to Appcues' cost analysis. For most teams, a library like Tour Kit or React Joyride delivers the same result at a fraction of the cost, with accessibility and positioning that would take months to build correctly.

What's the best free alternative to building onboarding in-house?

Tour Kit, React Joyride, Shepherd.js, Driver.js, and Onborda are all MIT-licensed and free. Tour Kit provides a headless architecture under 8KB gzipped with WCAG 2.1 AA compliance. React Joyride has the largest community at 340K+ weekly downloads. Your choice depends on framework and design system requirements.

How do I add a product tour to a React app without building one from scratch?

Install a library like Tour Kit (npm install @tourkit/core @tourkit/react) and define steps as a configuration array. Tour Kit handles positioning, focus management, and keyboard navigation while you use your own tooltip components. A basic tour takes under 30 minutes.

Can I use a product tour library with my design system?

Headless libraries like Tour Kit render tour logic without prescribing UI, so your tooltips use your design system's components and styles directly. Opinionated libraries like React Joyride ship with built-in UI that requires CSS overrides to match, which can break on library updates.

What accessibility features should a product tour include?

A WCAG 2.1 AA compliant product tour needs focus trapping, keyboard navigation (arrow keys, Escape to close), ARIA role="dialog" attributes, screen reader announcements, and prefers-reduced-motion support. Tour Kit includes all five by default. Most other libraries require manual implementation.

Internal linking suggestions:

• Link from best headless UI libraries for onboarding (related listicle)
• Link from lightweight product tour libraries under 10KB (mentions Driver.js)
• Link from best free product tour libraries (overlapping audience)
• Cross-link to React tour library benchmark 2026 for performance data

Distribution checklist:

• Dev.to (full article with canonical URL)
• Hashnode (full article with canonical URL)
• Reddit r/reactjs (discussion post, not promotional)
• Hacker News (only if paired with benchmark data)

JSON-LD Schema:

{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "5 best alternatives to building onboarding in-house",
  "description": "Compare 5 alternatives to building product tours from scratch. See real costs, bundle sizes, and accessibility scores to pick the right onboarding approach.",
  "author": {
    "@type": "Person",
    "name": "Tour Kit Team",
    "url": "https://tourkit.dev"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tour Kit",
    "url": "https://tourkit.dev",
    "logo": {
      "@type": "ImageObject",
      "url": "https://tourkit.dev/logo.png"
    }
  },
  "datePublished": "2026-04-07",
  "dateModified": "2026-04-07",
  "image": "https://tourkit.dev/og-images/best-alternatives-building-onboarding-in-house.png",
  "url": "https://tourkit.dev/blog/best-alternatives-building-onboarding-in-house",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://tourkit.dev/blog/best-alternatives-building-onboarding-in-house"
  },
  "keywords": ["build onboarding in-house alternative", "diy product tour alternative", "custom onboarding vs library", "product tour library comparison"],
  "proficiencyLevel": "Beginner",
  "dependencies": "React 18+, TypeScript 5+",
  "programmingLanguage": {
    "@type": "ComputerLanguage",
    "name": "TypeScript"
  }
}

Related articles

ListiclesApr 7, 2026 · 9 min read

8 best onboarding Chrome extensions for product teams (2026)

Compare the top onboarding Chrome extensions side by side. We tested 8 tools on pricing, accessibility, and design flexibility to help your team pick.

Read article

ListiclesApr 7, 2026 · 11 min read

5 best onboarding solutions with real analytics (not vanity)

Compare 5 onboarding tools that track activation rate and feature adoption, not just tours started. Pricing, bundle size, and analytics depth reviewed.

Read article

ListiclesApr 7, 2026 · 14 min read

Onboarding tools ranked by customer reviews (G2 + Capterra data)

Compare 10 onboarding tools using real G2 and Capterra ratings, review counts, and developer feedback. Pricing, complaints, and open-source options included.

Read article

ListiclesApr 7, 2026 · 12 min read

8 best product tour tools for B2B SaaS in 2026 (enterprise features ranked)

Compare 8 product tour tools ranked by enterprise features like SSO, analytics, and segmentation. Pricing data, feature matrix, and honest tradeoffs included.

Read article