Cross-platform product tours, onboarding flows and tooltips

react-walkit

Build product tours, user onboarding walkthroughs, feature discovery flows and tooltips with the same API on React web and React Native. Includes spotlight overlays, customizable popovers, analytics hooks and programmatic control.

Use react-walkit to build React and React Native product tours, onboarding walkthroughs, spotlight overlays, contextual tooltips and feature discovery flows from one shared API.

Product toursUser onboardingTooltipsFeature discoverySpotlight
npm install @runilib/react-walkit
npm GitHub
Guide section

Overview

@runilib/react-walkit is a cross-platform onboarding + product tour library. One API works on React web and React Native.

  • Tag any UI element with <WalkitStep id sequence /> to register a step.
  • Wrap the app (or a screen) in <WalkitProvider>; control the flow with useWalkit().
  • Built-in SVG (web) / react-native-svg (native) spotlight, animated popover, labels, theming, and programmatic control.
  • Public surface: WalkitProvider, WalkitStep, useWalkit, useWalkitEvent, Tooltip, ANIMATION_TYPES.
TourExample.tsxtsx
1import { WalkitProvider, WalkitStep, useWalkit } from '@runilib/react-walkit'
2
3export function App() {
4 return (
5 <WalkitProvider animationType="bounce">
6 <Dashboard />
7 </WalkitProvider>
8 )
9}
10
11function Dashboard() {
12 const { start } = useWalkit()
13
14 return (
15 <div>
16 <WalkitStep
17 id="hero"
18 sequence={0}
19 title="📊 Your progress"
20 content="Track completed tasks, deadlines and team velocity at a glance."
21 >
22 <HeroCard />
23 </WalkitStep>
24
25 <WalkitStep
26 id="cta"
27 sequence={1}
28 title="Create a project"
29 content="Hit + to start a new project."
30 >
31 <CreateButton />
32 </WalkitStep>
33
34 <button onClick={() => start()}>Start tour</button>
35 </div>
36 )
37}
Example preview
Desktop preview of the built-in Walkit spotlight and default popover.
react-walkit docs - Cross-platform product tours, onboarding flows and tooltips