Skip to main content

​
Import

import { FeatureGate } from "@billingos/sdk";

​
Basic usage

<FeatureGate feature="export_pdf">
  <ExportButton />
</FeatureGate>
Renders children only if the current user has access to the specified feature. Shows nothing by default when access is denied. Feature gate

​
Props

​
feature
string
required
The feature key to check access for. Must match a feature key in your BillingOS dashboard.
​
children
ReactNode
required
Content to render when the user has access.
​
fallback
ReactNode
Content to render when access is denied. If omitted, nothing is rendered.
​
loading
ReactNode
Content to render while the entitlement check is loading.
​
onAccessDenied
() => void
Called when the user doesn’t have access to the feature.
​
onQuotaExceeded
(usage: number, limit: number) => void
Called when the user has exceeded their usage quota.
​
showUsageBadge
boolean
Show remaining usage count as a badge.

​
Examples

​
With upgrade prompt fallback

<FeatureGate
  feature="custom_branding"
  fallback={
    <div className="p-4 border rounded">
      <p>Custom branding is available on the Pro plan.</p>
      <button onClick={() => router.push("/pricing")}>
        Upgrade
      </button>
    </div>
  }
>
  <BrandingEditor />
</FeatureGate>

​
With usage badge

<FeatureGate
  feature="api_calls"
  showUsageBadge={true}
  onQuotaExceeded={(usage, limit) => {
    toast.warning(`You've used ${usage}/${limit} API calls`);
  }}
>
  <ApiCallButton />
</FeatureGate>

​
With loading state

<FeatureGate
  feature="advanced_analytics"
  loading={<Skeleton className="h-64" />}
  fallback={<UpgradePrompt feature="advanced_analytics" />}
>
  <AnalyticsDashboard />
</FeatureGate>