Freemium Gate Pricing Block for React

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.

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.

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.

Both buttons are links. It's a ShineButton with render set to an a element and nativeButton={false}. 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.

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