@docentjs/react

React bindings for Docent, a guided product tour library. React 18 and 19.

pnpm add @docentjs/react

One install is enough: defineTour, the types, and @docentjs/react/themes all come from this package.

import { useTour } from '@docentjs/react'
import { welcomeTour } from './tours'

function Dashboard() {
  const tour = useTour(welcomeTour)
  return <button onClick={() => tour.start()}>Take the tour</button>
}

Your own popover

const tour = useTour(welcomeTour, { popover: (ctx) => <Card ctx={ctx} /> })
// render {tour.portal} once anywhere in your tree

The component is portalled into a container the library positions, so context, hooks and CSS all work. The library keeps the overlay, spotlight, keyboard and focus handling.

Many tours

const docent = useDocent({ tours: [welcome, invoices] })
useEffect(() => void docent.identify(user.id, { plan: user.plan }), [user])

Tours start from their own triggers, conditions and frequency.

Also

• <Tour tour autoStart popover>{(t) => …}</Tour> component form.
• <DocentProvider renderer identity storage sink> to share defaults.

MIT