beUI Pro

Guide · 8 min read · Updated

How to Build a Pricing Page in React That Converts

A pricing page is where interest turns into a decision, and most of the friction comes from uncertainty: which plan fits, what the real total is, and what happens after paying. Good pricing pages remove that uncertainty in a predictable order.

This guide covers how to structure plans, when to add a calculator or a comparison table, and how to use motion so price changes feel trustworthy instead of flashy.

What you will build

  • A plan layout that makes the recommended choice obvious
  • Billing toggles and calculators that show the real total
  • A comparison table that answers the “what's the difference?” question
  • An FAQ that removes the last objections before checkout

Step 1

Decide on your pricing model first

Flat plans, per-seat plans, and usage-based plans need different layouts. Flat tiers fit a classic two- or three-card row. Per-seat pricing needs a team size input. Usage pricing needs examples of what a typical customer spends.

Limit the page to the plans you actually want people to choose. Three is the common ceiling; two is often clearer for early products.

Tip: Name plans by who they are for (Solo, Team, Company) rather than by size words like Basic and Premium. Visitors self-select faster.

Step 2

Make the recommended plan obvious

Highlight one plan with a stronger border, a short badge, or a filled action, never all three at once. Keep each plan's outcome list short and written as results, not feature names.

If you offer monthly and yearly billing, animate the price change on toggle. A rolling number makes the discount visible; an instant swap hides it.

Step 3

Show the real total for teams

When price depends on seats, let visitors set their team size and see the total update, including volume discounts. Hiding the math until checkout is one of the most common reasons buyers leave.

A full pricing page can move the recommendation as the team size changes, so the highlighted plan always fits the visitor's situation.

Step 4

Add a comparison for detail-oriented buyers

Below the plans, a comparison table answers the questions plan cards can't hold. Group rows by theme (usage, collaboration, security, support) and show only what differs between plans.

On mobile, wide tables break. Use tabs per plan or a filter that shows only differences instead of a horizontally scrolling grid.

Step 5

Answer objections and add proof

Place an FAQ directly under the plans. Cover billing frequency, cancellation, refunds, upgrades, seat changes, and what happens to data. Then add one customer outcome with a concrete number.

Finish with a short call to action for visitors who need to talk to someone first.

Install the blocks from this guide

With a beUI Pro token configured, each command adds the block's source to your project through the shadcn CLI. You own the files and can edit them like any other component.

ShellTerminal
npx shadcn add @beui-pro/ai-pricing
npx shadcn add @beui-pro/pricing-visual-plans
npx shadcn add @beui-pro/pricing-plan-explorer
npx shadcn add @beui-pro/feature-comparison
npx shadcn add @beui-pro/social-proof-story-reel
npx shadcn add @beui-pro/cta-glow
Set up the registrySee plans

Launch checklist

  • One plan is clearly recommended
  • Prices, billing period, and currency are unambiguous
  • Team or usage totals are visible before checkout
  • The comparison works on a 390px screen
  • Refund, cancellation, and upgrade questions are answered
  • Price changes animate without shifting the layout

Frequently asked questions

Should pricing live on the homepage or its own page?
Both, for most SaaS products. A short pricing section on the homepage helps first-time visitors, and a dedicated page holds the comparison table and full FAQ for people who are ready to decide.
How should I show a yearly discount?
Show the monthly equivalent of the yearly price and the saving as a small badge on the toggle. Animate the change so visitors notice the difference.
Do I need a comparison table?
If your plans differ in more than four or five ways, yes. Otherwise short outcome lists on each plan card are enough.
Can these pricing blocks connect to Stripe or another checkout?
Yes. The blocks are UI only. Each action is a normal link or button you point at your checkout URL or server action.

Keep building

CollectionSaaS landing pagesBuild a SaaS landing page with animated React hero, feature, pricing, FAQ, CTA, and footer blocks. Compare layouts and open live previews.GuideHow to Build an Animated SaaS Landing Page in Next.jsA step-by-step guide to structuring, building, and animating a SaaS landing page in Next.js with React blocks, Tailwind CSS, and Motion.GuideHow to Build a User Onboarding Flow in ReactBuild a React onboarding flow from sign-up to first value: auth screens, step forms, team invites, setup checklists, and empty states, with installable blocks.GuideHow to Build a Waitlist Page in Next.js for Your LaunchBuild a pre-launch waitlist page in Next.js: a clear promise, an email form that converts, social proof, a countdown, and an animated background.