cairn-react

React bindings for Cairn — the workflow engine for onboarding, product adoption, and user guidance. Built on useSyncExternalStore (concurrent-safe). Re-exports the entire cairn-core surface, so this is the only package you need.

npm i cairn-react

import { FlowProvider, defineFlow, useFlow } from "cairn-react";

const onboarding = defineFlow({
  id: "onboarding",
  steps: [
    { id: "welcome", next: "profile", meta: { title: "Welcome 👋" } },
    { id: "profile", next: null },
  ],
});

function App() {
  return (
    <FlowProvider flow={onboarding} options={{ autoStart: true }}>
      <Tour />
    </FlowProvider>
  );
}

function Tour() {
  const { state, next, skip } = useFlow();
  const step = state.currentStep;
  if (!step) return null;
  return (
    <div>
      <h3>{String(step.meta?.title ?? step.id)}</h3>
      <button onClick={next}>Next</button>
      <button onClick={skip}>Skip</button>
    </div>
  );
}

Want accessible popover + spotlight out of the box? Add cairn-ui.

📖 Full documentation & live demo →