Pricing tables in 10 minutes: React component or from scratch?

A pricing table is a decision page. The visitor is not reading a price list: they are working out which plan is theirs, what they risk and what happens next. If the table does not answer those three questions, the number of columns does not matter.

You can start from a component in the catalogue or write it from scratch. The right choice depends on how many variables you carry: plans, currencies, taxes, trials, upgrades, downgrades, team seats.

The decision first, then the grid

• Which plan do you want to sell? Make it stand out, but do not hide the others.
• Is the price monthly, annual or both? Show the saving without layout shift.
• What does the plan include? One line per benefit, not a wall of ticks.
• What happens after the click? Trial, checkout, contact: the CTA has to say which.
• Who pays? An individual, a team, a company: the copy changes.

Ready-made component or table from scratch

The three states almost everyone forgets

Loading: the table must not jump when the prices arrive. Error: if checkout does not respond, the button must say what to do next. Renewal: the user must know when the charge lands and how to cancel. A pricing table that ignores these three states is a mockup.

A readable React base

If you take the component, open its page and check that the featured plan is data, not a hard-coded colour. If you build from scratch, keep the plans in an array and render them with a map: adding a plan must not mean copying three blocks of JSX.

const plans = [
  { id: "free", name: "Free", price: 0, featured: false },
  { id: "pro", name: "Pro", price: 24, featured: true },
  { id: "team", name: "Team", price: 79, featured: false },
];

export function Pricing({ plans }) {
  return (
    
      {plans.map((plan) => (
        
          {plan.name}
          {plan.price} € / mese
        
      ))}
    
  );
}

For the full patterns (centred plan, monthly/annual toggle, FAQ and closing CTA), read the Pricing table designs and Monthly/annual billing toggles guides.