Pricing Trio

three-tier x highlight

Three pricing tiers with the middle plan highlighted, feature lists and a clear CTA each.

pricingthree-tiercta

Starter

Choose

Pro

$29

Choose

Scale

$99

Choose

Code

pricing-3.tsx

const plans = [
  { name: "Starter", price: "$0", featured: false },
  { name: "Pro", price: "$29", featured: true },
  { name: "Scale", price: "$99", featured: false },
];

export function PricingTrio() {
  return (
    <section className="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-6 py-24 md:grid-cols-3">
      {plans.map((p) => (
        <div key={p.name} className={"rounded-2xl border p-6 " + (p.featured ? "border-foreground" : "border-border")}>
          <p className="text-sm text-muted-foreground">{p.name}</p>
          <p className="mt-1 text-4xl font-semibold">{p.price}</p>
          <button className="mt-6 w-full rounded-full bg-foreground py-2.5 text-background">Choose</button>
        </div>
      ))}
    </section>
  );
}

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the Pricing Trio section and fill it with my copy.”