> ## 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.
# FeatureGate
> Shows content when the customer has a feature, and a fallback when they do not.
`FeatureGate` renders its children when `allowed` is true and `fallback` when it is false.
**When to use**
* Around a feature that only some plans include, such as SSO settings or exports.
* Around a menu item or button that leads to such a feature.
* When the entitlement decision is still loading and you want nothing to show until it arrives.
Gates only change what the interface shows. Check the entitlement again on your server before doing the protected work.
**Light**
**Dark**
**Minimal**
**Neobrutal**
**Nozle**
**Nozle Dark**
## Importing FeatureGate
```tsx theme={null}
import {
FeatureGate,
UpgradePrompt,
type FeatureGateProps,
} from '@nozle-js/react'
```
## Rendering FeatureGate
`FeatureGate` has no look of its own and fetches nothing: you pass the entitlement decision.
```tsx components/sso-settings.tsx theme={null}
export function SsoSettings({ allowed }: { allowed: boolean }) {
return (
}>
)
}
```
## Data
The gate needs one boolean, `allowed`, and optionally `loading` while you read it.
### Live data
[`useEntitlement(featureCode)`](/sdks/react/hooks#the-hooks) returns the customer's `can()` result through your `billingEndpoint`:
```tsx theme={null}
import { useEntitlement } from '@nozle-js/react'
export function Exports() {
const entitlement = useEntitlement('data_exports')
return (
}
>
)
}
```
## Examples
### Upgrade prompt as fallback
An [`UpgradePrompt`](/sdks/react/components/upgrade-prompt) is the usual fallback. The screenshot shows the fallbacks of `FeatureGate`, [`PlanGate`](/sdks/react/components/plan-gate) and [`UsageGate`](/sdks/react/components/usage-gate), each an `UpgradePrompt`.
```tsx theme={null}
export function Exports({ allowed, openPlans }: { allowed: boolean; openPlans: () => void }) {
return (
}>
)
}
```
### While the decision loads
With `loading`, the gate renders nothing, so the fallback does not flash before the decision arrives.
```tsx theme={null}
export function Exports({ allowed, loading }: { allowed: boolean; loading: boolean }) {
return (
}>
)
}
```
## API reference
**allowed** `boolean` *required*
`true` renders `children`; `false` renders `fallback`.
**children** `ReactNode` *required*
The protected content.
**fallback** `ReactNode` (default: null)
Rendered when `allowed` is false.
**loading** `boolean` (default: false)
Renders nothing while true, so the fallback does not flash before the decision arrives.
### States
| State | What shows |
| - | - |
| `loading` is true | Nothing. |
| `allowed` is true | `children`. |
| `allowed` is false | `fallback`, or nothing without one. |
### Appearance
`FeatureGate` takes no `appearance` and has no element keys; style the fallback you pass.
## Related
> **[PlanGate](/sdks/react/components/plan-gate)**
>
> Gate by plan code.
> **[UsageGate](/sdks/react/components/usage-gate)**
>
> Gate by usage and limit.
> **[LockedOverlay](/sdks/react/components/locked-overlay)**
>
> Show a blurred preview instead of hiding.
> **[Feature gates](/sdks/react/gates)**
>
> Combining gates with backend state.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.