Feature gates

Gate components are presentational. They never fetch customer data and never receive a customer ID. Load entitlement, usage, and plan state through your authenticated backend, then pass the result into the gate.

Component	Renders
`FeatureGate`	`children` when `allowed` is true, `fallback` when it is false, nothing while `loading`.
`PlanGate`	`children` when `currentPlan` is in `allowedPlans`, else `fallback`.
`UsageGate`	`children` while `usage < limit`, else `fallback`. Reaching the limit counts as used up.
`UpgradePrompt`	An upgrade message and button, for fallbacks.
`LockedOverlay`	Blurred children with an `UpgradePrompt` on top when `locked`.

Each component page lists every option and shows the component in all themes.

Backend-driven composition

import { FeatureGate, PlanGate, UpgradePrompt, UsageGate } from '@nozle-js/react'

function ReportingSection() {
  const { data, loading } = useMerchantBillingState()

  return (
    <FeatureGate
      allowed={data?.entitlements.reporting ?? false}
      loading={loading}
      fallback={<UpgradePrompt planName="Growth" />}
    >
      <PlanGate
        currentPlan={data?.planCode ?? ''}
        allowedPlans={['growth', 'scale', 'enterprise']}
      >
        <UsageGate
          usage={data?.usage.reports ?? 0}
          limit={data?.limits.reports ?? 0}
          fallback={<span>Report limit reached</span>}
        >
          <ReportBuilder />
        </UsageGate>
      </PlanGate>
    </FeatureGate>
  )
}

Gates improve the user interface; they are not an authorization boundary. Enforce entitlement and usage rules again on the server before performing protected work.

Setup

Components

Billing

Entitlements

Feature gates

Backend-driven composition

​Backend-driven composition

Backend-driven composition