Feature Gate

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/feature-gate

Usage

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

Also exported: useFeatureGateLit.

API reference

Prop Type Default
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".

 "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".

 "Unlock"
children React.ReactNode

The gated content. Rendered for real; each top-level child brightens in turn on unlock.

 —
className string —