> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nozle.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# PlanGate

> Shows content only when the customer's plan is in a list of plans.

`PlanGate` renders its children when `currentPlan` is one of `allowedPlans`, and `fallback` otherwise.

**When to use**

* Around a section sold as part of higher plans, when no single entitlement describes it.
* When an allowlist of plan codes, compared exactly, decides access.

Prefer [`FeatureGate`](/sdks/react/components/feature-gate) with an entitlement when one exists: it keeps working when you add plans. Gates only change what the interface shows. Check access again on your server.

**Light**

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=0414411c172fdb32ba1ab8688d81854d)

**Dark**

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, dark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=ddd64cbd1e0e0fbf421f4ce913d3cb5f)

**Minimal**

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, minimal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/minimal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=dc342269c821e58e8ca09ffa2b89102f)

**Neobrutal**

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, neobrutal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/neobrutal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=2e3abf2dec81f5e05736835e7cdb4a42)

**Nozle**

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, nozle theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/nozle.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=b567628265058dea4dd6daa05480c109)

**Nozle Dark**

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, nozleDark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/nozle-dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=744f5323c74235888d0d005c54147e96)

## Importing PlanGate

```tsx theme={null}
import {
  PlanGate,
  UpgradePrompt,
  type PlanGateProps,
} from '@nozle-js/react'
```

## Rendering PlanGate

`PlanGate` has no look of its own and fetches nothing: you pass the customer's plan code.

```tsx components/team-settings.tsx theme={null}
export function TeamSettings({ planCode }: { planCode: string }) {
  return (
    <PlanGate currentPlan={planCode} allowedPlans={['pro', 'scale']} fallback={<UpgradePrompt planName="Pro" />}>
      <section>{/* Team settings */}</section>
    </PlanGate>
  )
}
```

## Data

The gate needs the customer's plan code as `currentPlan`. It has no loading state; render nothing yourself while the plan loads.

### Live data

Take the plan code from [`useSubscription`](/sdks/react/hooks#the-hooks):

```tsx theme={null}
import { useSubscription } from '@nozle-js/react'

export function Analytics() {
  const { data, isPending } = useSubscription()
  if (isPending) return null
  return (
    <PlanGate
      currentPlan={data?.subscription?.plan_code ?? ''}
      allowedPlans={['pro', 'scale']}
      fallback={<UpgradePrompt planName="Pro" />}
    >
      <div>{/* Analytics */}</div>
    </PlanGate>
  )
}
```

## Examples

### Upgrade prompt as fallback

Any plan not in `allowedPlans` gets the fallback, usually an [`UpgradePrompt`](/sdks/react/components/upgrade-prompt). The screenshot shows the fallbacks of [`FeatureGate`](/sdks/react/components/feature-gate), `PlanGate` and [`UsageGate`](/sdks/react/components/usage-gate), each an `UpgradePrompt`.

![Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/gates/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=0414411c172fdb32ba1ab8688d81854d)

```tsx theme={null}
export function AuditLog({ planCode, openPlans }: { planCode: string; openPlans: () => void }) {
  return (
    <PlanGate currentPlan={planCode} allowedPlans={['scale']} fallback={<UpgradePrompt planName="Scale" onUpgrade={openPlans} />}>
      <section>{/* Audit log */}</section>
    </PlanGate>
  )
}
```

## API reference

**currentPlan** `string` *required*

The customer's plan code.

**allowedPlans** `string[]` *required*

Plan codes that may see `children`, compared exactly.

**children** `ReactNode` *required*

The plan-gated content.

**fallback** `ReactNode` (default: null)

Rendered for any plan not in `allowedPlans`.

### States

| State | What shows |
| - | - |
| `currentPlan` in `allowedPlans` | `children`. |
| Any other plan | `fallback`, or nothing without one. |

`PlanGate` has no loading state.

### Appearance

`PlanGate` takes no `appearance` and has no element keys; style the fallback you pass.

## Related

> **[FeatureGate](/sdks/react/components/feature-gate)**
>
> Gate by entitlement.

> **[PlanBadge](/sdks/react/components/plan-badge)**
>
> Show the customer's plan.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.