dev-tools 4 min read

Frigade React SDK – Drop-in Onboarding Components for React Apps

Open-source React SDK for building product onboarding, feature tours, checklists, and activation flows. MIT-licensed, with a built-in CMS and analytics integrations.

#react #onboarding#product-growth #dev-tools
By
Share: X in
Frigade React SDK product thumbnail

TL;DR

TL;DR: Frigade is an open-source React SDK for building product onboarding — checklists, tooltips, tours, and CTAs — with a built-in CMS, analytics integrations, and a cloud or self-hosted option.

Source and Accuracy Notes

⚠️ This section is MANDATORY. All links must be verified from actual source, not guessed.

What Is Frigade?

Frigade is a developer-first platform for building product onboarding. Its React SDK provides drop-in, unstyled components for onboarding flows: checklists, tooltips, product tours, hotspots, and interactive forms. You control the styling with your own CSS.

The platform targets three use cases:

  • Activation — convert signups by guiding users through role-specific onboarding checklists
  • Adoption — surface feature tours and tooltips at the right moment in the product
  • Retention — deliver lifecycle-specific re-onboarding and collect feedback

Frigade also offers an AI assistant product (Frigade Assistant) that learns your product by observing it, then answers user questions, walks workflows, and performs actions on behalf of the user. This post focuses on the open-source React SDK.

Setup Workflow

Step 1: Install

npm install @frigade/react

Step 2: Add the SDK to your app

import { FrigadeProvider } from '@frigade/react';

export default function App() {
  return (
    <FrigadeProvider publicApiKey="your-public-api-key">
      <YourApp />
    </FrigadeProvider>
  );
}

Step 3: Add an onboarding checklist

import { Checklist } from '@frigade/react';

<Checklist
  flowId="onboarding-checklist"
  title="Get started"
  description="Complete these steps to get the most out of the product."
/>

Step 4: Configure flows in the Frigade dashboard

Create and manage flows in the Frigade dashboard. The dashboard provides a visual flow editor, targeting rules (by user role, plan, or behavior), and analytics on completion rates.

Key Features

Component library — Unstyled, accessible components ready to drop into any React app:

  • Checklist — ordered step-by-step onboarding checklists
  • Tooltip — contextual hints anchored to UI elements
  • Tour — multi-step product walkthroughs with spotlighting
  • Hotspot — persistent indicators for new or underused features
  • Form — inline data collection within onboarding flows

Built-in CMS — update copy and content without redeploying. Frigade ships a lightweight content management layer so you can iterate on onboarding copy independently of your codebase.

Analytics integrations — connect to Segment, Mixpanel, Posthog, and Amplitude to route onboarding events into your existing analytics stack.

Cloud or self-hosted — Frigade can run on your own infrastructure with your own LLM API keys. SOC 2 Type II and GDPR compliant.

Multi-version management — test onboarding variations in staging before promoting to production. The dashboard tracks per-version performance.

License and Source

The @frigade/react npm package is licensed under ELv2 (Elastic License 2.0). The GitHub monorepo at github.com/FrigadeHQ/javascript contains the React SDK source and the broader Frigade platform. The SDK is the open-source portion; Frigade’s cloud dashboard and AI features are commercial add-ons.

FAQ

Q: Is Frigade free to use? A: The React SDK is open-source under ELv2. The dashboard, analytics, and AI features have paid plans. See frigade.com/pricing for details.

Q: Can I self-host Frigade? A: Yes. Frigade supports self-hosted deployment with your own LLM API keys.

Q: Does the SDK require a Frigade account? A: Yes, the SDK requires a public API key from a Frigade workspace to fetch flow definitions and track progress.

Q: What React version is supported? A: The SDK targets React 16.8+ (hooks-compatible) through React 19.

Conclusion

Frigade fills the gap between “build it yourself” and “buy a full platform.” The React SDK gives you production-ready onboarding components in minutes, while the dashboard adds targeting and analytics without a separate toolchain. If you are shipping a SaaS product and have ever wrestled with an onboarding checklist, this is worth 15 minutes of evaluation.