Skip to main content

​
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.