Installation

Install

npm install crovver-react
# or
pnpm add crovver-react
# or
yarn add crovver-react

Peer dependencies: React 18+ or React 19+.

Setup

Wrap your application with CrovverProvider. In a Next.js app this goes in your root layout:

// app/layout.tsx
import { CrovverProvider } from 'crovver-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <CrovverProvider
          config={{
            publicKey: process.env.NEXT_PUBLIC_CROVVER_PUBLIC_KEY!,
            tenantId: 'CURRENT_WORKSPACE_ID',
            userId: 'CURRENT_USER_ID',
          }}
        >
          {children}
        </CrovverProvider>
      </body>
    </html>
  );
}

tenantId is the workspace or org ID from your app — the same value you use as externalTenantId when creating tenants or initiating checkout. userId is the individual user’s ID and is used to deduplicate owner records across sessions.

Environment Variables

# .env.local
NEXT_PUBLIC_CROVVER_PUBLIC_KEY=pk_live_...

What’s Exported

// Provider
import { CrovverProvider } from 'crovver-react';

// Hooks
import { useSubscription, useFeatureAccess, useBillingRedirect } from 'crovver-react';

// Components
import { Paywall, FeatureGuard, SubscriptionBadge } from 'crovver-react';

Next Steps

CrovverProvider

Full config reference for the provider.

useSubscription

Read subscription status and plan data.

useFeatureAccess

Gate features by plan.

useBillingRedirect

Trigger checkout and portal redirects.

CrovverProviderRoot context provider that powers all SDK hooks and components.

Overview

Core Concepts

Authentication

SDKs

Guides

Install

Setup

Environment Variables

What’s Exported

Next Steps

CrovverProvider

useSubscription

useFeatureAccess

useBillingRedirect

​Install

​Setup

​Environment Variables

​What’s Exported

​Next Steps

CrovverProvider

useSubscription

useFeatureAccess

useBillingRedirect

Install

Setup

Environment Variables

What’s Exported

Next Steps