Skip to main content
1

​
Install the package

npm install @nozle-js/react
2

​
Wrap your app with BillingProvider

BillingProvider initializes the Nozle client and makes billing data available to all child components and hooks.
app/providers.tsx
import { BillingProvider } from '@nozle-js/react';

function App() {
  return (
    <BillingProvider
      apiKey="pk_live_..."
      baseUrl="https://api.nozle.app"
      workspaceId="ws_abc123"
      centrifugoUrl="wss://rt.nozle.app/connection/websocket"
    >
      {children}
    </BillingProvider>
  );
}

​
Props

PropTypeDefaultDescription
apiKeystringrequiredYour publishable key (pk_)
baseUrlstring'https://api.nozle.app'API endpoint
workspaceIdstring''Your workspace ID
centrifugoUrlstringundefinedWebSocket URL for real-time entitlement updates
childrenReactNoderequiredYour app content
The apiKey must be a publishable key (prefixed with pk_), not a secret key. Publishable keys are safe for client-side use and can only read billing data scoped to the authenticated customer. Never expose your sk_ secret key in browser code.
3

​
Configure Tailwind CSS

Nozle components ship with a Tailwind preset that provides consistent theming out of the box. Add it to your Tailwind config:
tailwind.config.js
import { nozlePreset } from '@nozle-js/react/styles/preset';

export default {
  presets: [nozlePreset],
};
The preset registers the following CSS custom properties that you can override to match your brand:
VariablePurpose
--nozle-primaryPrimary accent color
--nozle-primary-foregroundText color on primary backgrounds
--nozle-backgroundPage background
--nozle-foregroundDefault text color
--nozle-cardCard background color
--nozle-borderBorder color
--nozle-mutedMuted background (toggles, disabled states)
--nozle-muted-foregroundMuted text color
--nozle-destructiveError / danger actions
--nozle-successSuccess indicators
--nozle-warningWarning indicators
--nozle-radiusBorder radius for components
Some components also accept component-specific CSS variables for finer control. For example, PricingTable supports --nozle-pricing-bg, --nozle-pricing-card-bg, --nozle-pricing-highlight, --nozle-pricing-border, and --nozle-pricing-radius — all falling back to their global equivalents.

​
Next steps

  • Components — pre-built billing UI components
  • Hooks — useCan, useUsage, and more
  • Gates — feature gating with React components