Installation

Name: Cairn
Author: theartisticprogrammer

Packages, provider, and your first tour.

Packages

npm i @cairnkit/react @cairnkit/ui @cairnkit/next
npm i -D @cairnkit/cli

@cairnkit/react pulls in core — you rarely install it directly.
@cairnkit/ui is the prebuilt overlay. Skip it if you are building your own.
@cairnkit/next is the router adapter. Use your own for other routers.

Supported versions

Prop	Type	Default	Description
`React`	`18 · 19`	—	Verified by building a real app on both. Needs useSyncExternalStore, so 18 is the floor.
`Next.js`	`14 · 15 · 16`	—	App Router and Pages Router. Verified against 14.2, 15.5 and 16.3.
`Vite / react-router`	`any`	—	Router access is a ten-line adapter — see the React page.
`Node (for the CLI)`	`>= 18`	—	cairn check and the audit helper.

Register your types

Optional, but it is what turns every anchor and flow id into a checked literal instead of a string.

app/cairn.d.ts

import type { anchors } from "./anchors";

declare module "@cairnkit/core" {
  interface CairnRegister {
    anchors: typeof anchors;
    flowIds: "upgrade-plan";
    events: "plan:upgraded";
  }
}

Mount the provider

app/providers.tsx

"use client";

import { CairnProvider } from "@cairnkit/react";
import { useAppRouterAdapter } from "@cairnkit/next";
import { CairnOverlay, TourLauncher } from "@cairnkit/ui";
import "@cairnkit/ui/styles.css";
import { upgradeFlow } from "./flows";

export function Providers({ children }) {
  return (
    <CairnProvider
      flows={[upgradeFlow]}
      router={useAppRouterAdapter()}
      onEvent={(e) => analytics.capture(e.name, e.props)}
    >
      {children}
      <CairnOverlay />
      <TourLauncher flowId="upgrade-plan" />
    </CairnProvider>
  );
}

Wire up the check

package.json

"scripts": {
  "lint": "eslint . && cairn check src"
}