Social Proof Pricing Block for React

Each lives in a constant at the top of the file. RATING holds the score and the review count, TESTIMONIAL the quote, the author's name, role, company and the initials shown in the avatar, STATS the four cells of the grid as label and value strings, and CUSTOMERS the wordmarks, each with a Lucide icon, a name and a lettering class string that gives it its own type. Swap the icon and lettering for your customers' real logos (an svg with an accessible name) once you have permission to show them, and use your real figures.

Edit PLANS: each plan has a name, a description, a monthly price, an annual price (the monthly amount when billed yearly), its features, the call to action's cta and href, and featured: true with a badge on the plan that should stand out, which gets the tinted cell, the badge, the first place on a phone and the primary button. The line under the price computes the yearly total from annual. CURRENCY is the symbol written before each price, and FOLDED is how many features a phone shows first.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Add the plan and the period to it, for example /checkout?plan=scale&billing=yearly, and let your server map them to your payment provider's monthly or yearly price.

Yes. The stars are decorative and hidden; the score reads as "Rated 4.9 out of 5". The quote is a figure with a blockquote and a figcaption naming its author, and the avatar's initials are hidden since the name is already there. The stats are a description list, so each value is read with its label, and the wordmarks are a list of names. The billing switch is a radio group named "Billing period", and both calls to action carry their plan's name for screen readers, as in "Start free trial, Scale plan".

From the lg breakpoint the proof and the plans sit side by side; below it they stack with the plans first, the featured plan at the top, so its button comes well within the first screen and a half, and the proof follows. Each list shows its first five features, then a ghost button, "All 6 features", that expands the rest and reads as expanded or collapsed to a screen reader. The stats grid drops from four cells to two and the wordmarks wrap.

Use it when strong reviews and adoption justify the price: mid-to-high ticket SaaS and B2B products where trust decides the purchase, with only two plans to compare. A standard grid of three or more plan cards suits products where buyers compare tiers feature by feature.