Blocks / Commerce

Feature Gating

The vocabulary for selling a plan: a server-side FeatureGate that renders gated content only to entitled workspaces, three densities of upgrade prompt (full, compact, inline), a quota warning that escalates as a limit approaches, and a preview paywall that blurs content instead of hiding it.

$pnpm exec shadcn add @intelligo/feature-gating

Run it inside an app made by intelligo create. Anywhere else, name the registry and install the base first.

Loading preview…
about this block

The vocabulary for selling a plan: a server-side FeatureGate that renders gated content only to entitled workspaces, three densities of upgrade prompt (full, compact, inline), a quota warning that escalates as a limit approaches, and a preview paywall that blurs content instead of hiding it. Which features exist and which plan unlocks them is consumer config (lib/feature-catalog.ts). Install pricing or billing-settings for somewhere to send the user.

yours to edit
  • lib/feature-catalog.ts
  • lib/feature-gating-config.ts

messages/en/feature-gating.json

Everything else is used verbatim; a deployment varies through these files and translations.How seams work →

requires
built from

button, card, dialog

npm packages it adds

@intelligo-dev/billing · lucide-react · next-intl

what shadcn add writes · 9 files
Components
  • components/billing/feature-gate.tsx
  • components/billing/upgrade-prompt.tsx
  • components/billing/inline-upgrade-banner.tsx
  • components/billing/quota-warning.tsx
  • components/billing/quota-limit-dialog.tsx
  • components/billing/paywall-blur.tsx
Actions, config and messages
  • lib/feature-catalog.ts
  • lib/feature-gating-config.ts
  • messages/en/feature-gating.json

Ready to try it? Three commands and the app runs against a stub model.