@cairnkit/react

Headless React bindings for cairnkit. No styling, no router assumptions — bring your own components, or add @cairnkit/ui for the prebuilt overlay.

npm i @cairnkit/core @cairnkit/react

"use client";
import { CairnProvider } from "@cairnkit/react";

<CairnProvider flows={flows} router={adapter} onEvent={(e) => analytics.capture(e.name, e.props)}>
  {children}
</CairnProvider>;

Then drive your own UI from the controller:

const { step, rect, stepIndex, showNext, advance, back, skip } = useTour();

Router adapters

Everything route-aware goes through a ten-line adapter, so cairnkit is not tied to any framework:

type RouterAdapter = {
  usePathname(): string;
  navigate(href: string): void;
};

Next.js adapters ship in @cairnkit/next.

Full documentation: cairnkit.dev

MIT