Billing Feature Gating Preview
A teaser card for a feature that's restricted to a higher plan. Mock content sits under a blur with reduced opacity, an overlay names the feature and shows which plan unlocks it, and a lock icon scales up slightly on hover. Built for dashboards that want to show what a locked feature looks like instead of hiding it entirely.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button, skeleton dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-feature-gating-preview.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing59.tsx instead.
Usage
The file also exports billing59Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing59, billing59Demo } from "@/components/blocks/billing/billing59"; export default function Page() { return <Billing59 {...billing59Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| featureName | string | "Advanced analytics" | Name shown in the card header. |
| description | string | none | Short sentence shown under the lock icon, describing what the feature does. |
| requiredPlan | string | "Pro" | Plan name interpolated into the "Requires X" badge. |
| ctaLabel | string | "Upgrade to unlock" | Label on the upgrade button. |
| ctaHref | string | "#" | Link target for the upgrade button. |
| className | string | none | Extra classes for the outer card. |
Behavior notes
- The restricted content is a set of Skeleton placeholders, blurred and dimmed, wrapped in an element marked aria-hidden so screen readers skip straight to the overlay's text instead of reading meaningless placeholder shapes.
- The lock icon scales up slightly on hover using a Tailwind group modifier (group/gate), no JavaScript or animation library involved.
- This is a visual gate only, it never hides real data, since the mock content is a Skeleton, not the actual restricted content. Enforce the real restriction on your server.
- requiredPlan is a plain string dropped into the badge, so any tier name works, not just a fixed "Pro" or "Enterprise" label.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.