# Feature Gate

Paywall wrapper that shows premium content dimmed under a small unlock callout. Tap it and the paywall grows out of the lock; after purchase it shrinks back and the content brightens, row by row.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/feature-gate
```

## Import

```tsx
import { useFeatureGateLit, FeatureGate } from "@/components/ui/feature-gate/feature-gate";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `locked` | `boolean` | While true the real content sits dimmed and inert under a lock pill. |
| `onUpgrade?` | `() => void` | Fires when the lock pill is pressed (before the paywall opens, if any). |
| `paywall?` | `FeatureGatePaywall` | With a paywall, pressing the pill grows this sheet out of the pill. |
| `onUnlock?` | `(plan: PaywallPlan) => void` | A purchase in the gate's paywall succeeded — set `locked` to false here. |
| `label?` | `string` | What is locked, on the pill. Default "Pro feature". |
| `description?` | `string` | Read to screen readers as the pill's hint (the paywall carries the detail). |
| `upgradeLabel?` | `string` | Action word at the end of the pill. Default "Unlock". |
| `children?` | `React.ReactNode` | The gated content. Rendered for real; each top-level child brightens in turn on unlock. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/feature-gate