shadcn.io is not affiliated with official shadcn/ui
Freemium Gate Pricing Block for Solid
The paywall itself: a spending report that turns blurred under a lock and an Unlock with Premium panel, with the Premium plan, its price and its button beside it and the Free plan under it.
Installation
Overview
Show what the free plan holds back with this freemium gate pricing section, shown here for Thrift Budget, a personal finance app. The hero is the paywall: a mock spending report, $2,870 for October, with its first two categories drawn crisply and the rest blurred and faded out, and over them a panel with a lock and the words "Unlock with Premium". Beside it, Premium holds the price ($7.99 a month), the section's only filled Shine Button and nine features, and under the report the Free plan has one line and an outline button. The plans meet in one band of cells that share hairlines, between the page's side rails drawn by Guides, with + marks on its corners. The report is 384 px tall, so the Premium button is on the first screen on a laptop, and on a phone Premium's features collapse after five behind an "All 9 features" button. Built with Badge, Guides, Shine Button and Lucide icons, with CSS transitions only. For freemium products where the paid plan unlocks something the visitor can almost see: reports, exports, history.
FAQ
How do I change the plans and the report?
PREMIUM and FREE hold the plans: the name, the call to action and its href, and the features (Premium also its price). The report is two lists of categories, VISIBLE for the rows that stay crisp and LOCKED for the blurred ones, each with a name, an amount and a bar share, a percentage of the biggest. Swap them for your own product's preview: a report, an export, a chart.
Is the blurred report real data?
No, and it shouldn't be. It's an example drawn from plain elements, hidden from screen readers and made inert, so nobody can focus or select it. Never ship a visitor's real locked content blurred in the page: the text is still in the HTML, and blur is a style. Keep the actual content on the server until the visitor is entitled to it.
What does a screen reader hear?
The report is decoration and is skipped. The panel over it is real text: "Unlock with Premium" and the sentence under it. Each plan's name is an h3 under the section's h2, Premium's price reads "$7.99 per month", and its feature list is a list, with the button that expands it on a phone reporting whether it is open.
How do I connect the buttons to checkout and sign-up?
Both buttons are links. It's a ShineButton with asChild around an a element. Point Premium at a checkout for the plan and Free at the page where the visitor continues without paying, and keep the gating itself on the server.
How does it look on a phone?
The cells stack: the report first, then Premium with its price and button, then Free. Premium shows its first five features and an "All 9 features" button reveals the rest, so the filled button is reached within about a screen and a half. From lg the report and Free sit in one column and Premium spans both rows beside them, and all nine features show.
When does a paywall preview beat a plain plan comparison?
When the paid plan unlocks something visual that the free plan shows a little of. Seeing the thing itself, cut off, makes the upgrade concrete in a way a feature list can't. If the difference is only limits or seats, a comparison table says it more precisely.