@sunboard/react

React SDK for Sunboard — agent-native onboarding for SaaS apps.

Renders the in-app checklist, product tours, and hotspots that your AI agent authors and you promote to active in Sunboard.

You usually don't install this by hand. Run npm i -g sunboard && sunboard init in your app and the CLI wires the provider, stylesheet, and environment variables for you. The reference below is for people who want to understand or customize that wiring after the fact.

Install

npm i @sunboard/react

Peer dependencies: react >= 18.3 and react-dom >= 18.3 (React 19 supported).

Wiring

Wrap your app once with SunboardProvider, drop <Sunboard /> somewhere in your layout, and import the default stylesheet:

import { SunboardProvider, Sunboard } from "@sunboard/react";
import "@sunboard/react/styles.css";

export default function RootLayout({ children }) {
  return (
    <SunboardProvider
      runtimeKey={process.env.NEXT_PUBLIC_SUNBOARD_KEY!}
      user={{ id: currentUser.id, firstName: currentUser.firstName }}
      navigate={(href) => router.push(href)}
    >
      {children}
      <Sunboard />
    </SunboardProvider>
  );
}

sunboard init produces this exact wiring for Next.js (App Router and Pages) and Vite. sunboard doctor confirms it's still correct after upgrades.

What gets rendered

• <Sunboard /> — the main entry point. Renders the active checklist, any in-progress tours, and any visible hotspots based on the current route and user.
• <SunboardChecklist />, <SunboardHotspots />, <SunboardTour /> — individual surfaces, if you want to place them manually.
• useSunboard() — hook returning runtime state and imperative helpers like startTour(key), useful for custom product UI.

Theming

Override CSS variables defined in @sunboard/react/styles.css to match your app's design system. Import the Sunboard stylesheet before your own so your overrides win the cascade.

Links

• CLI + agent skills: sunboard
• App: https://app.sunboardhq.com
• Documentation: https://sunboardhq.com

License

MIT — see LICENSE.