FeatureGate

FeatureGate checks whether the wallet has a feature unlocked - via an active subscription, a one-time purchase, or a manual grant - and renders its children or a fallback. The default fallback is a scoped PurchaseButton that only shows prices unlocking the requested feature.

Unlike CreditGate, nothing is consumed. Access is derived, so the gate opens and closes automatically as the subscription renews or ends.

import { FeatureGate } from "@/components/neonfin/feature-gate";

export function AnalyticsPanel() {
  return (
    <FeatureGate feature="analytics">
      <div>Analytics unlocked</div>
    </FeatureGate>
  );
}

Install

npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-gate.json

Ships alongside CreditGate in the same registry item.

Usage

import { FeatureGate } from "@/components/neonfin/feature-gate";

export function Analytics() {
  return (
    <FeatureGate feature="analytics">
      <AnalyticsDashboard />
    </FeatureGate>
  );
}

With a custom fallback:

<FeatureGate
  feature="export"
  fallback={<PurchaseButton>Unlock export</PurchaseButton>}
>
  <ExportButton />
</FeatureGate>

Or customize the built-in scoped fallback:

<FeatureGate
  feature="export"
  purchaseButtonProps={{ variant: "outline" }}
>
  <ExportButton />
</FeatureGate>

Props

Checking a feature imperatively

Use useFeature when you need the boolean rather than a wrapper:

import { useFeature } from "@/components/neonfin/provider";

const { enabled, loading } = useFeature("analytics");

See Access & features for how features are attached to prices and derived.